Как использовать добавление и удаление Javascript в строке таблицы

avatar
Dokey
9 августа 2021 в 06:46
136
1
-2

У меня есть следующие коды. значение фильтра таблицы

значение фильтра можно скрыть с помощью "display: none" и показать значение с помощью "display: display:table-row"

Проблема: Я хочу изменить способы "отображать: нет" и "отображать: таблица-строка", чтобы добавить () строку таблицы, когда установлен флажок, и удалить () строку таблицы, когда флажок пуст

Кто-нибудь может подсказать мои коды?

Скрипка: https://jsfiddle.net/xh9m5kjv/

function filter(event, filterCol) {
  let element = event.target;
  let condt1 = document.getElementsByClassName(filterCol);
  for (let i = 0; i < condt1.length; i++) {
    if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
      if (element.checked == true) {
      //condt1[i].parentElement.closest('tr').add() ??????
         condt1[i].parentElement.closest('tr').style = "display:table-row"
                  
      } else {
       //condt1[i].parentElement.closest('tr').remove() ??????
         condt1[i].parentElement.closest('tr').style = "display:none"
      }
    }
  }
}

document.querySelectorAll('.option1')
  .forEach(input => input.addEventListener('input', ()=>filter(event,"check1")));
 
<div id="input">
  <label>Hide 1 :<input class="option1" type="checkbox" value="1" checked/></label>
</div>


<table id="listingTable">
  <tr>
    <th>Number</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="check1">1</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td class="check1">2</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td class="check1">1</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Извините за мой плохой английский, не могу объяснить все, что мне нужно, надеюсь, вы понимаете, что мне нужно

Спасибо!

Источник
Andreas
9 августа 2021 в 06:54
0

Как следует из названия и из документации (и примеров), .classList — это набор классов CSS. Поэтому .add() добавляет такой класс. Создайте класс для сокрытия и .add()/.remove() этого класса (или более простой вариант .toggle()) - Какого объема исследований ожидают пользователи Stack Overflow?

Dokey
9 августа 2021 в 07:24
0

Ах!!! Я неправильно спрашиваю Не классный список Мне нужно отредактировать мой вопрос Спасибо за совет!

Andreas
9 августа 2021 в 08:19
0

Ваше редактирование не имеет смысла. На узлах DOM нет метода .add(). А .remove() полностью удалит узел (<tr>) из DOM.

Ответы (1)

avatar
Kirill Savik
9 августа 2021 в 06:59
1

Хотите этот код?

<script>
function filter(event, filterCol) {
  let element = event.target;
  let condt1 = document.getElementsByClassName(filterCol);
  for (let i = 0; i < condt1.length; i++) {
    if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
      if (element.checked == true) {
        condt1[i].parentElement.classList.remove("hide");
        condt1[i].parentElement.classList.add("show");        
      } else {
        condt1[i].parentElement.classList.remove("show");
        condt1[i].parentElement.classList.add("hide");
      }
    }
  }
}

document.querySelector('.option1').addEventListener('input', ()=>filter(event,"check1"));
</script>


<style>
.show {
  display: table-row;
}

.hide {
  display: none;
}
</style>
Andreas
9 августа 2021 в 07:24
0

Почему .hide и .show? Один из них должен быть состоянием по умолчанию и поэтому не нуждается в дополнительном классе.