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

uemypmqf 于 2022-12-02 发布在 Java

关注(0)|答案(4)|浏览(145)

我有下面的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使用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/>";

Html

来源：https://stackoverflow.com/questions/4567485/collapse-tables-with-specific-table-id-javascript

4条答案

按热度按时间

hts6caw31#

您正在寻找getElementById：

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

如果使用jQuery，则

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

赞(0）回复(0）举报 2022-12-02

iyzzxitl2#

通常，ID对于文档中的每个元素都是唯一的。（EDIT * 应为 *）
您可以使用著名的“dollar函数”快速访问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库有各种函数可以完成所有这些任务。

赞(0）回复(0）举报 2022-12-02

omqzjyyz3#

不确定我所做的是否是正确的方法，但它起作用了。
我所做的只是将<table>中的<tbody> html标记更改为<tfoot>，并更新了我原来的javascript以查找tfoot元素，现在只有那些表会折叠，而其他表不会。
如果有人知道这方面是否会有问题，或者愿意向我解释为什么会这样，那就太好了。

赞(0）回复(0）举报 2022-12-02

qmelpv7a4#

为了使HTML有效，允许您使用每个ID，并且只能使用 * 一次 *。
如果您能够将相同的（CSS）类分配给要隐藏的表（这 * 应该 * 是可能的），您可以使用您喜欢的javascript框架的类选择器（例如：http://api.jquery.com/class-selector/）的数据。

赞(0）回复(0）举报 2022-12-02