Hide all row of a table that not contains a specific value in nth td

Question

I want hide all row that contains fith td a value not equals to 0 or greater than 0 eg

<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>0</td>
</tr>

<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>5555555559</td>
</tr>

<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>0</td>
</tr>

<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>8888888882</td>
</tr>
</table>

i want hide all row if 5th td of that row not contains 0.

if this is possible using javascript otherwise jquery

Answer 1

With jQuery you could do:

$(document).ready(() => {
  $('#thistable td:nth-child(5)').each((index, cell) => {
    if ($(cell).text() !== '0') {
      $(cell).parent().addClass('do_not_show');
    }
  });
});

But it's pretty straightforward to do it with vanilla js

 Array.from( document.querySelectorAll('#thistable td:nth-child(5)') ).filter(cell => {return cell.textContent !== '0'}) .forEach(cell=>{ cell.parentNode.classList.add('not_zero'); });

 td { border: 1px solid; } tr.not_zero td { border: 1px dotted #AAA }

 <table id="thistable"> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>0</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>5555555559</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>0</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>8888888882</td> </tr> </table>

This can be done also using xpath and evaluating the content beforehand

$x('//*[@id="thistable"]/tbody/tr/td[5][not(text()="0")]')

but it seems a bit overkill.

Answer 2

 var elements = document.querySelectorAll('tr > td:nth-child(5)'); for (var i = 0; i < elements.length; i++) { if (elements[i].textContent !== '0') { elements[i].parentNode.style.display = 'none'; } }

 <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>0</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>5555555559</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>0</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>8888888882</td> </tr> </table>

Answer 3

You can select all the tr elements by using querySelectorAll() and use filter to get only the fifth children( td ) of of all the tr , check if the value is greater than '0' and apply visibility hidden on them:

 [...document.querySelectorAll('tr')].forEach(tr => [...tr.children].filter((td, idx) => idx === 4).map(td => tr.style.display = (td.innerHTML > '0') ? 'none': 'block') );

 <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>0</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>5555555559</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>0</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>8888888882</td> </tr> </table>

Answer 4

myTable.querySelectorAll('td:last-child').forEach(o=>{
    if (parseInt(o.innerText) !== 0) { 
        o.parentElement.style.display = 'none'; 
    }
})