javascript - 每列纯 javascript 过滤器复选框

Question

我正在尝试创建表，我可以在其中使用每列的复选框过滤数据

通过为检查过滤列创建函数 a 和函数 b

问题：我想检查列以过滤干净代码和易于使用的表内容（顺便说一句，我不明白如何使用箭头函数）

有什么方法可以编辑我的干净代码吗？

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

const b = function filter(event) {
  var element = event.target
  var condt1 = document.getElementsByClassName("check2")
  for (var j = 0; j < condt1.length; j++) {
    if (condt1[j].innerHTML.toLowerCase() == element.value.toLowerCase()) {
      if (element.checked == true) {
        condt1[j].parentElement.style = ""
      } else {
        condt1[j].parentElement.style = "display:none"
      }
    }
  }
}

document.querySelectorAll('.option1')
  .forEach(input => input.addEventListener('input', a));
  
  
document.querySelectorAll('.option2')
  .forEach(input => input.addEventListener('input', b));

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

<div id="input">
  <label>Filter Name </label><br>
  <label>Human<input class="option1" type="checkbox" value="Human" checked/></label>
  <label>Robot<input class="option1" type="checkbox" value="Robot"checked/></label><br><br>

  <label>Filter boolean </label><br>
  <label>true<input class="option2" type="checkbox" value="true" checked/></label>
  <label>false<input class="option2" type="checkbox" value="false" checked/></label>
</div>
<table id="my-table">
  <thead>
    <tr>
      <th> Name </th>
      <th> boolean </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="check1">Human</td>
      <td class="check2">true</td>
    </tr>
    <tr>
      <td class="check1">Robot</td>
      <td class="check2">false</td>
    </tr>
    <tr>
      <td class="check1">Human</td>
      <td class="check2">true</td>
    </tr>
    <tr>
      <td class="check1">false</td>
      <td class="check2">true</td>
    </tr>
  </tbody>
</table>

对不起我的英语不好，无法解释我需要什么，希望你明白我需要什么

谢谢 ！

标签： javascriptfilter

Answer 1

您可以创建单个函数而不是创建单独的函数，因为您的大部分逻辑在函数中是通用的。

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.style = ""
      } else {
        condt1[i].parentElement.style = "display:none"
      }
    }
  }
}

document.querySelectorAll('.option1')
  .forEach(input => input.addEventListener('input', ()=>filter(event,"check1")));
  
  
document.querySelectorAll('.option2')
  .forEach(input => input.addEventListener('input', ()=>filter(event,"check2")));

谢谢。