在第 n 个 td 中隐藏不包含特定值的表的所有行

Question

我想隐藏所有包含 fith td 值不等于 0 或大于 0 的行，例如

<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>

如果该行的第 5 个 td 不包含 0，我想隐藏所有行。

如果可以使用 javascript 否则使用 jquery

Answer 1

使用 jQuery，您可以执行以下操作：

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

但是用 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>

这也可以使用 xpath 并预先评估内容来完成

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

但这似乎有点矫枉过正。

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

您可以使用querySelectorAll()选择所有tr元素，并使用 filter 仅获取所有tr的第五querySelectorAll()元素（ td ），检查值是否大于 '0' 并应用隐藏在它们上的可见性：

 [...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'; 
    }
})