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

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

              }