Riduci Tavoli con specifica tabella ID? JavaScript

Question

Ho il sotto JS in cima alla mia pagina e crolla con successo tutte le tabelle del carico. Tuttavia sto cercando di capire come crollare solo le tabelle <table id="ctable"> con l'ID di "ctable" o c'è qualche altro modo per specificare le tabelle per rendere comprimibile etc?

<script type="text/javascript"> 

   var ELpntr=false;
   function hideall()
   {
      locl = document.getElementsByTagName('tbody');
      for (i=0;i<locl.length;i++)
      {
         locl[i].style.display='none';
      }
   }

   function showHide(EL,PM)
   {
      ELpntr=document.getElementById(EL);
      if (ELpntr.style.display=='none')
      {
         document.getElementById(PM).innerHTML=' - ';
         ELpntr.style.display='block';
      }
      else
      {
         document.getElementById(PM).innerHTML=' + ';
         ELpntr.style.display='none';
      }
   }
   onload=hideall;
</script>

HTML echo'd utilizzando PHP questo è in una dichiarazione per un loop e ci potrebbero essere più tabelle.

echo "<table id=\"ctable\">"
."<thead><tr><th>"
."<a href=\"#\" onclick=\"showHide('show".$show->showid."','span".$show->showid."')\"><span id=\"span".$show->showid."\"><img src=\"images\icon_collapse.gif\"></span><span>".$show->showname."</span></a>"
."</th></tr></thead>";
echo "<table><tbody id=\"show".$show->showid."\">"
."<tr><td rowspan=\"8\"><a class=\"thumbnail\" href=\"#thumb\"><img src=\"".$show->image."\" height=\"150px\" width=\"150px\"><span><img src=\"".$show->image."\"/><br/>".$show->showname."</span></a></td><td rowspan=\"8\"><img class=\"line\" width=\"2\" height=\"100%\"></td><td class=\"jralign\">Show ID:</td><td>".$show->showid."</td></tr>"
."<tr><td class=\"jralign\">Show Link:</td><td><a href=\"".$show->showlink."\">".$show->showlink."</a></td></tr>"
."<tr><td class=\"jralign\">Started (Year):</td><td>".$show->started."</td></tr>"
."<tr><td class=\"jralign\">Ended (Year):</td><td>".$yearended."</td></tr>"
."<tr><td class=\"jralign\">Seasons:</td><td>".$show->seasons."</td></tr>"
."<tr><td class=\"jralign\">Classification:</td><td>".$show->classification."</td></tr>"
."<tr><td class=\"jralign\">Network:</td><td>".$show->network."</td></tr>"
."<tr><td class=\"jralign\">Status:</td><td>".$show->status."</td></tr>"
."</tfoot></table>"
."</table><br/>";

Answer 1

Non so se quello che ho fatto è stato il modo corretto, ma funziona.

Tutto quello che fatto è stato cambiare il tag html <tbody> all'interno del <table> per <tfoot> e aggiornato il mio javascript originale per cercare l'elemento TFOOT invece e ora solo quelle tabelle collasso e non gli altri.

Se qualcuno sa se ci saranno problemi con riferimento a questa o cure per spiegare a me perché questo è, che sarebbe eccellente.

Answer 2

Siete alla ricerca di getElementById:

locl = document.getElementById("ctable").getElementsByTagName('tbody');

---

jQuery , sarebbe

$('#ctable tbody').hide();

Answer 3

In genere gli ID sono unici per ogni elemento del documento. (EDIT dovrebbe essere)

È possibile accedere a un ID rapidamente con il famoso "funzione di dollaro":

function $(idString) { return document.getElementById(idString); } 

... che restituirà l'elemento con ID che, ad esempio, var targetTable = $('ctable'); e si può andare a lavorare su di esso.

---

L'attributo name può essere utilizzato per raggruppare elementi. È quindi possibile utilizzare getElementsByName() per ottenere il gruppo (tranne che in IE). Inoltre, l'attributo name non è strettamente valido per la maggior parte degli elementi, quindi non è davvero incoraggiati ad utilizzare tale.

Tuttavia, ritengo che il metodo molto utile in ogni modo. Questa funzione funziona in tutti i browser:

function $N(name,parentObj) {  //Can provide parent object to optimize search
  var ALL, E = new Array();
  parentObj ? ALL = $T("*",parentObj) : ALL = $T("*");

  for(a=0;a<ALL.length;a++) { 
   ALL[a].getAttribute('name') == name ? E.push(ALL[a]) : null; 
  }
  return E;
};

... che restituirà un gruppo di elementi con lo stesso nome.

---

Dato che siamo in argomento, un metodo rigorosamente valida di raccogliere un gruppo di elementi sta avendo un valore comune nella loro attributo class.

La libreria JQuery ha varie funzioni che fanno tutto questo.

Answer 4

Per rendere valido il codice HTML, v'è permesso di utilizzare ogni ID esattamente una volta .

Se siete in grado di assegnare la stessa classe (CSS) per le tabelle che si desidera nascondere (e dovrebbe essere possibile), è possibile utilizzare il selettore di classe del framework javascript preferito . (esempio: http://api.jquery.com/class-selector/ )