vendredi 23 juillet 2021

vanilla js hide row table on checkbox

I have the following codes. checkbox for hide table row

Problem: Filter boolean can't hide of table but hide select option ? I want to hide row

Fiddle: http://jsfiddle.net/ocy8hzux/

Can anyone advise with my codes?

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")));
<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><br>
<table id="my-table">
  <thead>
    <tr>
      <th> Name </th>
      <th> boolean </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="check1">Robot</td>
      <td>
        <select>
            <option class="check2">true</option>
            <option >true</option>
        </select>
      </td>
    </tr>
    <tr>
        <td class="check1">Human</td>
      <td>
        <select>
            <option class="check2">true</option>
            <option >false</option>
        </select>
      </td>
    </tr>
    <tr>
     <td class="check1">Robot</td>
      <td>
        <select>
            <option class="check2">false</option>
            <option >false</option>
        </select>
      </td>
    </tr>
    <tr>
     <td class="check1">Human</td>
      <td>
        <select>
            <option class="check2">true</option>
            <option >true</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

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

Thanks !




Aucun commentaire:

Enregistrer un commentaire