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

StackOverflow https://stackoverflow.com/questions/4567485

题

我的页面顶部有以下JS，它成功地折叠了所有表。但是我想弄清楚如何只崩溃 <table id="ctable"> 具有“ ctable”的ID的表，还是有其他指定表使折叠式等表的方法？

<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的html echo在语句循环中，并且可能有多个表。

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/>";
有帮助吗？

解决方案 3

不确定我所做的是正确的方法，但它起作用。

我所做的就是改变 <tbody> HTML标签 <table> 至 <tfoot> 并更新了我的原始JavaScript以寻找TFOOT元素，现在只有这些表倒塌而不是其他表。

如果有人知道这是否会有问题或心于向我解释为什么会有问题，那就太好了。

其他提示

您正在寻找 getElementById:

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

使用 jQuery, ， 这将是

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

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

您可以使用著名的“ 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库具有各种功能，可以做到这一切。

为了使HTML有效，您可以准确使用每个ID 一次.

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top