纯javascript复选框过滤行

布朗尼

我有以下代码。表格行中比较值的复选框

问题：
1）当表值相同的多行时，它将隐藏所有我想比较的内容 1 复选框 1 行
2）为什么选中复选框时功能会开始工作？我想启动功能 onload 窗口

有人可以建议我的代码吗？

function filterCondtn1(event) {
  var element = event.target
  var condt1 = document.getElementsByClassName("option")
  for (var i = 0; i < condt1.length; i++) {
    if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
      if (element.checked == true) {
        condt1[i].parentElement.style = "display:none"
      } else {
        condt1[i].parentElement.style = "display:block"
      }
    }
  }
}

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td,th  {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }

<div id="InputOpts">
  <input type="checkbox" value="1" oninput="filterCondtn1(event);">Option 1
  <input type="checkbox" value="1" oninput="filterCondtn1(event);">Option 2
  <input type="checkbox" value="2" oninput="filterCondtn1(event);">Option 3
</div>

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="option">1</td>
    <td>1</td>
  </tr>
  <tr>
    <td class="option">2</td>
    <td>2</td>
  </tr>
    <tr>
    <td class="option">3</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="option">1</td>
    <td>1</td>
  </tr>
</table>

抱歉我的英语不好，无法解释我需要的所有内容，希望您了解我的需要

Polywhirl 先生

您应该使用Set. 如果你想要多个过滤器，你可以使用 aMap代替。如果启用该选项，则添加到该集合中，如果禁用该选项，则将其删除。

使用类隐藏不符合过滤条件的行。

const filterVals = new Set();

const isValid = (value) => filterVals.size === 0 || filterVals.has(value);

const handleInputChange = ({ target: { checked, value } }) => {
  if (checked) filterVals.add(value);
  else filterVals.delete(value);
  updateTableRows();
}

const updateTableRows = () =>
  document.querySelectorAll('.option').forEach(option => {
    option.closest('tr').classList.toggle('hidden-row', !isValid(option.textContent));
  });

document.querySelectorAll('#input-opts input[type="checkbox"]')
  .forEach(input => input.addEventListener('input', handleInputChange));

table { border-collapse: collapse; }
table, th, td { border: thin solid grey; }
th, td { padding 0.25em; text-align: center; }

.hidden-row { display: none; }

#input-opts { margin-bottom: 1em; }
#input-opts label { margin-right: 1em; }

<div id="input-opts">
  <label>Name 1 <input type="checkbox" value="1" /></label>
  <label>Name 2 <input type="checkbox" value="2" /></label>
  <label>Name 3 <input type="checkbox" value="3" /></label>
</div>

<table id="my-table">
  <thead>
    <tr><th>Name</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td class="option">1</td><td>1</td></tr>
    <tr><td class="option">2</td><td>2</td></tr>
    <tr><td class="option">3</td><td>3</td></tr>
    <tr><td class="option">1</td><td>1</td></tr>
  </tbody>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。