Question

我在页面顶部有以下JS，它在加载时成功折叠了所有表。但是我想弄清楚如何只折叠ID为“ctable”的<table id="ctable">表，或者是否有其他方法来指定要折叠的表等？

<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使用PHP，这是一个for语句循环，可能有多个表。

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

您正在寻找getElementById：

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

使用jQuery，它将是

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

Answer 2

通常，ID对于文档中的每个元素都是唯一的。（编辑应该）

您可以使用着名的“美元功能”快速访问ID：

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

...将返回带有该ID的元素，例如var targetTable = $('ctable');你可以开始工作。

name属性可用于将元素组合在一起。然后，您可以使用getElementsByName()来获取组（IE中除外）。此外，name属性对大多数元素并不严格有效，因此并不鼓励使用它。

但是，我发现这种方法非常有用。此功能适用于所有浏览器：

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

...将返回一组具有相同名称的元素。

由于我们是关于这个主题的，因此收集一组元素的严格有效方法在class属性中具有共同的价值。

JQuery库具有完成所有这些功能的各种功能。

Answer 3

不确定我所做的是否是正确的方法，但它确实有效。

我所做的就是将<tbody>中的<table> html标记更改为<tfoot>并更新我的原始javascript以查找tfoot元素，现在只有那些表崩溃而不是其他

如果有人知道这方面是否会有问题或者向我解释为什么会这样，那就太棒了。

Answer 4

要使HTML有效，您可以使用一次的每个ID。

如果您能够将相同的（CSS）类分配给要隐藏的表（并且应该可以），则可以使用您喜欢的javascript框架的类选择器（例如：http://api.jquery.com/class-selector/）。

折叠具有特定表ID的表？ JavaScript的

4 个答案: