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

Question

我想隐藏所有包含第五个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

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 2

使用 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 3

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

Answer 4

您可以使用querySelectorAll()选择所有tr元素，并使用过滤器仅获取所有tr的第五个子元素(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>