skip to Main Content

Look this table.

<table id='tab'>
    <tr><td>AAA</td><td class='hidable'>BBB</td></tr>
    <tr><td>CCC</td><td>DDD</td></tr>
    <tr><td>EEE</td><td>FFF</td></tr>
    <tr><td>GGG</td><td class='hidable'>HHH</td></tr>
    <tr><td>III</td><td class='hidable'>JJJ</td></tr>
    <tr><td>KKK</td><td>LLL</td></tr>
    <tr><td>MMM</td><td class='hidable'>NNN</td></tr>
</table>

In this table, how can I hide all TR that contains a TD with class = ‘hidable’?

Thank you.

2

Answers


  1. Use .has():

    $('#tab tr').has('td.hidable').hide();
    
    Login or Signup to reply.
  2. For someone looking for how to do this with pure JS:

    Consider the following code:

    <script>
    let trs = document.querySelectorAll("tr");
    let tds;
    trs.forEach(tr =>{ 
      tds=tr.querySelectorAll("td");
      tds.forEach( td =>{
        if(td.hasAttribute("class", "hidable")){
         tr.setAttribute("hidden","");
        }
      });
    });
    </script>
    

    Hope you find this useful!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search