Question

HTML

<table>
<th> ID</th>
<th> text</th>
<th> state
<input type="checkbox" value="1"><input type="checkbox value ="2">
</th>
<tr>
<td>ID 1</td>
<td>textblabla</td>
<td class="state state1 state2 > STATE 1 2 row</td>
</tr>
<tr>
<td>ID 2</td>
<td>textblabla</td>
<td class="state state1> STATE 2 row</td>
</tr>

我想使用复选框来显示/取消显示完整的行。状态从1-5开始，因此可以生成5个复选框。如果选中了checkbos，则所有包含“state”类的行都将被取消显示，如果未选中，它们将再次显示

但是为了那个我需要“得到”包含那个td的tr ...怎么能这样做呢？

Answer 1

在普通的JS这样的东西 - 我假设你可以从复选框的click事件中获取checkboxValue和状态

var tds = document.querySelectorAll(".state"+checkboxValue);
for (var i=0;i<tds.length;i++) {
  tds[i].parentNode.style.display=checkboxState?"":"none";
}

然而，它更复杂，因为每个复选框都可以切换一行，而另一个复选框可以将其切换掉。

这是完整的实施

＆＃13;

window.onload = function () {
    var chk = document.querySelectorAll("input[type=checkbox]");
    for (var i = 0; i < chk.length; i++) { // register event handler
        chk[i].onclick = function () {
            var show = false,
                i, j, states = [],
                chk = document.querySelectorAll("input[type=checkbox]");
            for (i = 0; i < chk.length; i++) { // get the states of all checkboxes
                states["state" + chk[i].value] = chk[i].checked;
            }
            var tds = document.querySelectorAll(".state"); // get all state cells
            for (i = 0; i < tds.length; i++) { // for each of the cells
                tds[i].parentNode.style.display = "none"; // hide it
                var classes = tds[i].className.split(" ");
                for (j = 0; j < classes.length; j++) {
                    if (states[classes[j]] === true) { // show if checked
                        tds[i].parentNode.style.display = "";
                    }
                }
            }
        }
        chk[i].onclick(); // initialise in case of reload
    }
}

＆＃13;

<table>
  <tr>
    <th>ID</th>
    <th>text</th>
    <th>state
      <input type="checkbox" value="1">1
      <input type="checkbox" value="2">2
    </th>
  </tr>
  <tr>
    <td>ID 1</td>
    <td>textblabla</td>
    <td class="state state1 state2">STATE 1 2 row</td>
  </tr>
  <tr>
    <td>ID 2</td>
    <td>textblabla</td>
    <td class="state state1">STATE 2 row</td>
  </tr>
</table>

＆＃13;

隐藏TR取决于TD类

1 个答案: