pure javascript filter checkbox per column

Question

I'm trying to create table where I can filter my data using a checkbox per column

by create function a and function b for check filter column

Problem : I want to check column to filter table contents on clean code and easy to use (btw I don't understand how to use arrow functions)

have any way edit for my clean code ?

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>

Sorry for my bad English, can't explain all what I need, hope you understand what I need

Thanks !

What problem are you encountering? Also, the Name of false looks like a typo — CertainPerformance
– CertainPerformance, Commented Jul 23, 2021 at 6:26
I want to short code for check column to filter (example) : if I want to add from 2 column to 3 column I need to create function c same function b and function a That to multiple duplicate code , Thanks! — Dokey
– Dokey, Commented Jul 23, 2021 at 6:33

poo · Accepted Answer · 2021-07-23 07:12:33Z

1

You can create a single function rather than creating separate functions as most of your logic is common across the functions.

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")));

Thanks.

answered Jul 23, 2021 at 7:12

poo

1,2507 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

pure javascript filter checkbox per column

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related