使用JavaScript

Question

我有一个HTML表格，如果你点击第一个单词格式为“打开”，那么对于每一行，它会显示一个子行（如果有的话）。这工作正常，但唯一的问题是，当我单击第一个单元格来切换子行时，表中的所有子行都会同时切换。我希望它只显示我单击的行的子行，而不是每个子行。这是一个小提琴：

http://jsfiddle.net/kr967kd6/

正如你在我的小提琴中看到的那样，我把复选框放在桌子前面。我之前试过把我的复选框放在这里：

<input id="child1" type="checkbox">
<tr class="toggle">
    <td></td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
</tr>

但这不起作用。我能够让这些行切换的唯一方法是将复选框放在<table>元素之前，然后在我的CSS中调用它：

input[type=checkbox]:checked ~ table tr.toggle { display: table-row; width: calc(100% - 20px); }

如何在没有同时切换所有子行的情况下，为我单击的相应行切换子行？

任何帮助将不胜感激。

Answer 1

使用JavaScript

当任何复选框变为:checked时，您的目标是所有TR元素

input[type=checkbox]:checked ~ table tr.toggle { /* All TR? nope. wrong. */

一个接一个地使用你的输入你也可能陷入棘手的检查/未检查组合。你应该把你的复选框放在彼此远离的地方 - ＆gt;使用Next Sibling定位所需的元素，需要切换（不可能使用TABLE）。

改用多个表，或使用JS or jQuery ^{jsBin demo}

$(".test-table td a").click(function(){
  $(this).closest("tr").next().toggle();
});

替代使用纯HTML，CSS

您可以使用纯HTML / CSS 执行的最佳使用:target 选择器
（这不允许你切换或保持活跃状态，但无论如何它都非常有用）

.toggle        { display: none; }
.toggle:target { display: table-row; }

    <tr>
        <td><a href="#tr1">Open</a></td>
        <td>0</td>
    </tr>
    <tr id="tr1" class="toggle">
        <td></td>
        <td>data</td>
    </tr>

<强> jsBin demo (using :target selector)

Answer 2

这里有JSFiddle我希望能有所帮助。

如果你不介意jQuery解决方案：

$("#data tr td").on("click", function() {
    $(this).parent().next("tr").toggleClass("active");
});

在你的CSS中，改变这个：

input[type=checkbox]:checked table ~ tr.toggle { 
    display: table-row; 
    width: calc(100% - 20px); 
}

对此：

.toggle.active {
    display: table-row; 
    /* width: calc(100% - 20px);   => As Roko C. Buljan pointed out, width has no effect on <tr> */
}

单击时切换表行

2 个答案:

使用JavaScript

替代使用纯HTML，CSS