как скрыть строку таблицы, когда флажок не установлен

Question

Мне бы хотелось, чтобы табличка исчезла при снятии флажка. Это должно быть только на основе JavaScript (упражнение для школы).

Создание флажка работает, но я не могу настроить отображение на "none"

Есть еще 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. Каждый раз, когда вы запускаете вид, вы получаете последнее значение 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

Оберните таблицу в форму и попросите форму прослушивать любые изменения, которые происходят с любым флажком.Кроме того, каждый флажок должен быть в <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>

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

Извлеките функцию 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 при создании флажка и используйте тот же идентификатор в качестве индекса при сокрытии.