未选中复选框时如何隐藏表格行

Question

取消选中复选框后，我希望该表格消失。 它必须仅基于JavaScript（用于学校的运动）。

复选框的创建有效，但是我无法将显示样式设置为“无”

还有更多的TR，但是我删除了大多数TR，因为它对解决下面的代码没有任何附加价值。

 // Get parent of checkbox var searchTr = document.querySelectorAll("#searchTable tr"); // add checkbox to parent for (i = 1; i < searchTr.length; i++) { var chkbox = document.createElement("input"); chkbox.type = "checkbox"; chkbox.setAttribute("class", "chkbox"); searchTr[i].appendChild(chkbox); chkbox.checked = true; chkbox.addEventListener("change", hideMe); function hideMe() { searchTr[i].style.display = "none"; } } 

 <table id="searchTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th class="th-sm">Name </th> <th class="th-sm">Position </th> <th class="th-sm">Office </th> <th class="th-sm">Age </th> <th class="th-sm">Start date </th> <th class="th-sm">Salary </th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> 

Answer 1

请检查以下JsFiddle： https ://jsfiddle.net/ulric_469/v0taLbpr/4/

首先，没有正确给出代码，还有额外的div。 每次运行for look时，都会得到i的最后一个值。 在您的情况下为3。因此，每当您单击复选框时，它将搜索位置为3的数组。因此，您会遇到错误。

请找到JS代码：

var searchTr = document.querySelectorAll("#searchTable tr");

           // add checkbox to parent

            for (i = 1; i < searchTr.length; i++) {

                var chkbox = document.createElement("input");
                chkbox.type = "checkbox";
                chkbox.setAttribute("class", "chkbox");
                searchTr[i].appendChild(chkbox);
                chkbox.checked = true;
                chkbox.addEventListener("change",hideMe.bind(this, i));

            }
              function hideMe(i){
                  searchTr[i].style.display = "none";

              }

Answer 2

将hideMe函数置于循环之外。

for (i = 1; i < searchTr.length; i++) {
    var chkbox = document.createElement("input");
    chkbox.type = "checkbox";
    chkbox.setAttribute("class", "chkbox");
    chkbox.setAttribute("id", i);
    searchTr[i].appendChild(chkbox);
    chkbox.checked = true;
    chkbox.addEventListener("change",hideMe);
}

function hideMe(){
    searchTr[this.id].style.display = "none";
}

创建复选框时分配id属性，隐藏时使用相同的id作为索引。

Answer 3

小提琴： https ://codepen.io/anon/pen/zQbMzR ? editors =1010

添加事件监听器：

chkbox.addEventListener("change",hideMe);

事件处理程序：

function hideMe(e){ e.target.closest('tr').style.display = "none"; }

e.target被单击的元素（复选框），. closest（'tr'）为您提供最接近的tr父级。

Answer 4

将表格包装成表格，并让表格监听在任何复选框上发生的任何更改事件。 同样，每个复选框都必须位于<td>它是无效的HTML，以便将不是<td>或<th>作为<tr>的子<tr> 。 在回调中使用e.target ，它始终指向事件的起点（即，用户单击或更改的标签）。

 // Get parent of checkbox var searchTr = document.querySelectorAll("#searchTable tr"); // add checkbox to parent for (let i = 1; i < searchTr.length; i++) { var chkbox = document.createElement("input"); var cell = searchTr[i].insertCell(); chkbox.type = "checkbox"; chkbox.classList.add("chkbox"); chkbox.checked = true; cell.appendChild(chkbox); } document.querySelector("#ui").addEventListener('change', hide); function hide(e) { e.target.closest('tr').classList.add('hide'); } 

 .hide { visibility: collapse } 

 <form id='ui'> <table id="searchTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th class="th-sm">Name </th> <th class="th-sm">Position </th> <th class="th-sm">Office </th> <th class="th-sm">Age </th> <th class="th-sm">Start date </th> <th class="th-sm">Salary </th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> </form>