javascript filter table checkbox

Question

I have the following codes. table filter value

Problem: when un-check all filter and checked 1 2 again it show all value .

when checked 1 2 I want to show just col1 value = 1 and col2 value = 2

Can anyone advise with my code ?

Result #

What I Need #

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.toLocaleUpperCase() == element.value.toLocaleUpperCase()) {
      if (element.checked == true) {
         condt1[i].parentElement.closest('tr').style = "display:table-row"
                  
      } else {
         condt1[i].parentElement.closest('tr').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")));
document.querySelectorAll('.option3').forEach(input => input.addEventListener('input', ()=>filter(event,"check3")));

<div id="input">
<label>Filter Number </label><br>
<label>1<input class="option1" type="checkbox" value="1" checked/></label>
<label>2<input class="option2" type="checkbox" value="2" checked/></label>
<label>3<input class="option3" type="checkbox" value="3" checked/></label>
</div><br>


<table id="listingTable">
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  <tr>
    <td class="check1">1</td>
    <td class="check2">4</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">1</td>
    <td class="check2">2</td>
    <td class="check3">5</td>
  </tr>
   <tr>
    <td class="check1">3</td>
    <td class="check2">2</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">2</td>
    <td class="check2">2</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">4</td>
    <td class="check2">6</td>
    <td class="check3">3</td>
  </tr>
 
</table>

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

Thanks.

T.Shah · Accepted Answer · 2021-08-31 08:54:04Z

I think you want to match all three checkboxes conditions. Then instead of just looking up one column at a time, filter all the columns whenever a checkbox is checked. This is the modified filter function.

    function filter() {
        let cb1 = document.getElementsByClassName('option1')[0];    
        let cb2 = document.getElementsByClassName('option2')[0]; 
        let cb3 = document.getElementsByClassName('option3')[0];  

        let filterArr = new Array(cb1, cb2, cb3);
        
        var allMatched = 1; // flag initially set to 1 - if condition does not match will be made 0
        
        var table = document.getElementById("listingTable");
        for (var i = 1, row; row = table.rows[i]; i++) {
           //iterate through rows
           //rows would be accessed using the "row" variable assigned in the for loop
           for (var j = 0, col; col = row.cells[j]; j++) {
             //iterate through columns
             //columns would be accessed using the "col" variable assigned in the for loop
             if (filterArr[j].checked && col.innerHTML.toLocaleUpperCase() !== filterArr[j].value) {
                allMatched = 0;
             }                 
           } 
           if(allMatched === 0) {
               row.style = "display:none";
           }
           else {
               row.style = "display:table-row";
           }
           console.log("---------------------");
        }            
    }

Collectives™ on Stack Overflow

javascript filter table checkbox

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