隐藏带有文本内容的tr（表格行）

Question

我试图用javascript和css隐藏表格行。我不得不承认我还是初学者，所以我可能会问一些愚蠢的问题。

我想隐藏一个表格行，在td中的某个地方包含文本'banana'。

希望有人可以帮助我，谢谢！

我尝试过在互联网上找到的不同类型的代码，但无法正常工作。这是我到目前为止所得到的。

if(document.getElementsByTagName('tr').contains('banana')) 
{ 
   document.getElementsByTagName('tr').style.display = 'none'; 
}

Answer 1

你遇到的问题是你似乎在考虑jQuery。 JQuery在引擎盖下做循环。由于您不在jQuery世界中，因此您需要在集合中自行完成循环。

1. 选择行
2. 循环遍历行
3. 阅读文本
4. 检查文本是否匹配
5. 如果是的话，隐藏它

// select all the rows
const rows = document.querySelectorAll('tr');
// loop over the rows
rows.forEach( function (row) {
  // get the text of the row
  var text = row.textContent; // case insensitive use .toLowerCase()
  // see if it is in the string
  if (text.includes('banana')) {
    // add class to hide the row
    row.classList.add('hidden')
  }
})

.hidden {
  display: none;
}

<table>
  <tbody>
    <tr>
      <td>apple</td><td>$1.00</td>
    </tr>
    <tr>
      <td>pear</td><td>$1.00</td>
    </tr>
    <tr>
      <td>banana</td><td>$1.00</td>
    </tr>
    <tr>
      <td>strawberry</td><td>$1.00</td>
    </tr>
  </tbody>
<table>

这怎么会失败？当文本在单元格之间连接时，没有空格，因此您可以进行不存在的匹配。你是否在寻找另一个可能是错误的单词刺痛的东西。

您拥有的其他选项是循环遍历单元格，而不是循环遍历行。如果td中存在匹配项，则隐藏父项。

Answer 2

您可以获取所有tr元素并执行以下操作，而不是获取td元素：

var tdcollection = document.getElementsByTagName('td');
for (var i = 0; i < tdcollection.length; i++) {
  if (tdcollection[i].innerText.indexOf("banana") >= 0) {
    tdcollection[i].parentElement.style.display = 'none';
  }
}

<table>
  <tr><td>banana</td><td>test1</td></tr>
  <tr><td>grape</td><td>test2</td></tr>
</table>