pure javascript checkbox filter row

Question

I have the following codes. checkbox for compare value in table row

Problem:
1 ) when table value same multiple row it will hide all I want to complare 1 checkbox 1 row
2 ) why funtion will start work when checked box ? I want to start function onload window

Fiddle: http://jsfiddle.net/4sx1pdmn/

Can anyone advise with my codes?

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>

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

Setting style.display = "block" on a <tr> element will BREAK your table. Either set it to "" to return it to default, or explicity set it to "table-row", its actual default. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 22, 2021 at 13:01

Mr. Polywhirl · Accepted Answer · 2021-07-22 13:17:37Z

You should keep track of your selections with a Set. If you want multiple filters, you could use a Map instead. Add to the set if the option is enabled and remove if it gets disabled.

Use a class to hide the rows that do not meet the filter criteria.

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>

Mister Jojo · Accepted Answer · 2021-07-22 14:07:18Z

a way to do that

const TD_option =
  [...document.querySelectorAll('#myTable td.option')]  // make an array
    .map(el=>(                                         // of objects { val, el }
      { val : el.textContent.trim().toLowerCase()
      , tr  : el.closest('tr')
      })) 
  ;
document
  .querySelectorAll('#InputOpts input[type="checkbox"]')
  .forEach( ckbx =>
    {
    ckbx.checked = true  // all are  displayed on document load
    let chkVal   = ckbx.value.toLowerCase()
    ckbx.oninput = e =>
      {
      TD_option.forEach( row =>
        {
        if (chkVal == row.val )
          row.tr.classList.toggle('noDisplay', !ckbx.checked )
        })
      }
    })

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

<div id="InputOpts">
  <label><input type="checkbox" value="1">Option 1</label>
  <label><input type="checkbox" value="2">Option 2</label>
  <label><input type="checkbox" value="3">Option 3</label>
</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>

Collectives™ on Stack Overflow

pure javascript checkbox filter row

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related