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>的子元素。在回调中使用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>

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

4 个答案: