时间戳

首页 > 解决方案 > 未选中复选框时如何隐藏表格行

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

问题描述

当我取消选中复选框时，我希望表格行消失。它必须仅基于 JavaScript（学校练习）。

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

有更多的 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>

标签： javascripthtmlfor-loop

解决方案

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

首先代码没有正确给出，还有额外的div。每次运行 for 查找时，您都会获得 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";

              }

推荐阅读