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

【问题标题】：how to hide a table row when checkbox is not checked未选中复选框时如何隐藏表格行
【发布时间】：2019-06-04 11:33:12
【问题描述】：

当我取消选中该复选框时，我希望表格行消失。它必须仅基于 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>

【问题讨论】：

我假设这个练习不允许你使用 jquery？
确实是Javascript。
我认为在声明和调用函数时都需要在函数中传递“i”
要在函数中使用变量，您需要将其从回调传递到声明（添加参数作为下面的答案），然后函数将能够在内部使用它它。
你的意思是输入 function hideMe(i){ searchTr[i].style.display = "none"; }?我在 chrome 的开发者工具中的控制台给出了以下消息： Uncaught TypeError: Cannot read property 'style' of undefined at HTMLInputElement.hideMe

标签： javascript html for-loop

【解决方案1】：

请检查以下 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";

              }

【讨论】：

【解决方案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 作为索引。

【讨论】：

【解决方案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 父级。

【讨论】：

【解决方案4】：

将表格包装在一个表单中，让表单监听任何复选框上发生的任何更改事件。此外，每个复选框都需要在<td> 中，将不是<td> 或<th> 的任何内容作为<tr> 的子级是无效的HTML。在回调中使用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>

【讨论】：