Javascript 如何通过单击表格标题显示和隐藏表格的行？

我想使用getElementById（）方法查看行。我想单击“标题”并显示以下行。如何正确使用getElementById（）？您可以运行代码

函数隐藏（）{
var table=document.getElementById（“mytab1”）；
for（变量i=0，单元格；单元格=表格。单元格\[i\]；i++）{
cell.style.display=“无”；
}
}

...
标题
1.
退出

首先，你做错了，首先，我找不到document.getElementById（“mytab1”）；mytab1 id，我的意思是，要显示mytab1，您必须创建一个相应的id。现在要重新创建您的示例，请尝试以下操作

   <table id="mytab1">
    <tr>
    <th onclick="hide()" style="cursor:pointer;"> Header </th>
    </tr>


    <tr ><td> 1 </td></tr>

    <tr ><td><a style="cursor:pointer;"> Quit </a></td></tr>

    </table>


    <script>
 function hide() {
                var table = document.getElementById("mytab1");
                alltr = table.querySelectorAll("tr");

                for (var i = 1; i < alltr.length-1; i++) {
                    alltr[i].style.display = (alltr[i].style.display == "none") ? "" : "none";
                }
            }
    </script>

标题
1.
退出
函数hide（）{
var table=document.getElementById（“mytab1”）；
alltr=table.queryselectoral（“tr”）；
对于（变量i=1；i

---

试试看它是否有效，如果它不告诉我，让我们一起解决它。

使用jQuery，您可以得到这个输出

$（函数（）{
var$rows=$（“#mytab1 tbody”）；
$（“#mytab1 th”）。在（“单击”，函数（）{
//警报（“点击”）；
$rows.hide（1000）；
});
});

标题
1.
退出
与现有答案相比，我使用的方法略有不同。此外，它使用普通Javascript，而不是jQuery

首先，您可以使用CSS，而不是通过内联样式隐藏元素：

table.bodyHidden tr:nth-child(odd),
table.bodyHidden tr:nth-child(even) {
  display: none;
}

table.bodyHidden tr:first-child {
  display: block;
}

然后，如果您有多个表，并且不希望在脚本中硬编码表的ID，则可以通过
事件.target
导航到单击处理程序中的
元素，然后在其上切换
bodyHidden
类


函数隐藏（事件）{
var tableNode=未定义；
var currentNode=event.target；
//在触发单击事件的元素的父元素中搜索表节点。
while（tableNode==未定义）{
if（currentNode.nodeName=='TABLE'）{
tableNode=currentNode；
}否则{
currentNode=currentNode.parentNode；
}
}
//切换bodyHidden类。
if（tableNode.classList.contains（“bodyHidden”））{
tableNode.classList.remove（“bodyHidden”）；
}否则{
tableNode.classList.add（“bodyHidden”）；
}
}
table.bodyHidden tr:n个子项（奇数），
table.bodyHidden tr:n子级（偶数）{
显示：无；
}
table.bodyHidden tr：第一个孩子{
显示：块；
}

标题
1.
退出
当前结果是什么？请使Fiddle链接的代码无效。Hello不起作用在这里检查@Dimitris我正在查看您的代码，请稍后编辑我的代码。只需使用“alltr.length”而不是“alltr.length-1”来显示隐藏所有行。此外，在单击之前应隐藏所有行。