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

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

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

【解决方案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 库具有执行所有这些功能的各种函数。

【讨论】：

@Phrogz - 啊，但他们不必如此。 :) 如果它们是，该页面只会更可预测地工作。如果有多个 ID，document.getElementById() 将只返回找到的第一个或最后一个 ID。
@Steve 是的，一个人可以选择通过网络发送任何随机的废话并对浏览器撒谎，称之为“text/html”。从存在上讲，你是对的：如果有人制作了一个语法无效的页面，宇宙和用户将继续存在。但是，对于 HTML 标准，我在 RFC 2119 中使用了“必须”这个词。如果我们谈论的是一个有效页面，那么每个id 属性必须是唯一的。 :)
@Phrogz - 我的回答经常提到页面的严格有效性。我不是在这里争论标准，或者是对还是错，我是说可以在当前的 webdev 环境中完成，而不会抛出任何错误。就个人而言，我认为它们也必须是独一无二的，但如果它们不是，页面也可以工作。顺便说一句，对于学习 javascript 的人来说，这些信息可能会很有帮助，不管它是不是垃圾。
@Steve 我认为建议当前恰好可以使用的无效代码是一种伤害，尤其是对于新用户而言。但是，您（当然）有权发表您的意见；我既不反对也不编辑您的答案。 :) 只是表达一个稍微不同的观点供讨论。
@Phrogz - 够公平的。不是针刺，而是从调试的角度来看，这些信息可以提供一个“哦，这就是为什么会发生这种情况”的时刻。是的，完全允许这样做是一种讽刺。 :) 欢迎来到 webdev 的世界，嘿嘿嘿。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

我的 ID 是唯一的，因为它们是在使用 PHP 的 foreach 循环中分配的。因此，为什么我不能选择“”的 ID，因为我现在知道它们每次都会是什么。