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

【问题标题】：Hide all row of a table that not contains a specific value in nth td隐藏第 n 个 td 中不包含特定值的表的所有行
【发布时间】：2020-03-20 03:17:11
【问题描述】：

我想隐藏所有包含不等于 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

【问题讨论】：

欢迎来到 Stack Overflow。 "I want" 两次，没有一个问号。这不是一个“我想要一些代码”的网站。 做一些研究。在解决我们自己的问题方面表现出一些努力。附带特定代码。你的任务很简单。如果不确定此页面的工作原理，请再次阅读 tour、How to Ask 并尽最大努力创建一个 minimal reproducible example。

标签： javascript jquery html html-table

【解决方案1】：

您可以使用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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用 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")]')

但这似乎有点矫枉过正。

【讨论】：

【解决方案4】：

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>

【讨论】：