0

我的页面顶部有以下 JS，它在加载时成功折叠所有表。但是我想弄清楚如何只折叠<table id="ctable">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'd using PHP this is in a for statement looping 并且可能有多个表。

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/>";
4

4 回答 4

1

您正在寻找getElementById：

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

使用jQuery，它将是

$('#ctable tbody').hide();
于 2010-12-31T01:28:04.493 回答
1

通常，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 库具有执行所有这些操作的各种函数。

于 2010-12-31T01:28:48.733 回答
0

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

我所做的只是更改to中的<tbody>html 标记并更新我的原始 javascript 以查找 tfoot 元素，现在只有这些表折叠而不是其他表。<table><tfoot>

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

于 2011-01-01T09:16:42.150 回答
0

为了使 HTML 有效，您可以只使用每个 ID一次。

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

于 2011-01-02T10:57:36.150 回答