Zusammenbruchtabellen mit spezifischer Tabellen -ID? JavaScript

Question

Ich habe die folgenden JS oben auf meiner Seite und es bricht erfolgreich alle Tabellen auf dem Laden zusammen. Ich versuche jedoch herauszufinden, wie man nur zusammenbricht <table id="ctable"> Tabellen mit der ID von "ctable" oder gibt es eine andere Möglichkeit, die Tabellen anzugeben, um zusammenklappbar zu machen usw.?

<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 hat mit PHP wiedergegeben. Dies befindet sich in einem für Anweisungsschleifen und es kann mehrere Tabellen geben.

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

Ich bin mir nicht sicher, ob das, was ich getan habe, der richtige Weg war, aber es funktioniert.

Alles was ich tat war die Änderung der <tbody> HTML -Tag im Inneren der <table> zu <tfoot> und habe mein ursprüngliches JavaScript aktualisiert, um stattdessen nach dem TFOOT -Element zu suchen, und jetzt kollabieren nur diese Tabellen und nicht nach den anderen.

Wenn jemand weiß, ob es Probleme in Bezug auf dies geben wird oder mir darum geht, mir zu erklären, warum dies der Fall ist, wäre das ausgezeichnet.

Answer 2

Du schaust nach getElementById:

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

---

Verwendung JQuery, es wäre

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

Answer 3

In der Regel sind IDs für jedes Element in einem Dokument eindeutig. (BEARBEITEN sollte sein)

Sie können schnell mit der berühmten "Dollar -Funktion" auf eine ID zugreifen:

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

... die das Element mit dieser ID zurückgeben, z. B. var targetTable = $('ctable'); Und Sie können daran arbeiten.

---

Das name Das Attribut kann verwendet werden, um Elemente zusammen zu gruppieren. Sie können dann verwenden getElementsByName() um die Gruppe zu bekommen (außer in IE). Auch die name Das Attribut ist für die meisten Elemente nicht streng gültig, daher ist es nicht wirklich ermutigt, dies zu verwenden.

Ich finde diese Methode jedoch sowieso sehr nützlich. Diese Funktion funktioniert in allen Browsern:

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;
};

... die eine Gruppe von Elementen mit demselben Namen zurückgeben.

---

Da wir zu diesem Thema wir sind, hat eine streng gültige Methode, eine Gruppe von Elementen zu sammeln class Attribut.

Die JQuery -Bibliothek hat verschiedene Funktionen, die all dies erfüllen.

Answer 4

Um das HTML gültig zu machen, dürfen Sie jede ID genau verwenden einmal.

Wenn Sie den Tabellen, die Sie verbergen möchten, die gleiche Klasse (CSS) zuweisen können (und es sollte Seien Sie möglich), können Sie den Klassenwählers Ihres bevorzugten JavaScript -Frameworks verwenden (Beispiel: http://api.jquery.com/class-selector/).