Question

我正在尝试使用javascript和CSS隐藏表格行。我必须承认我还是个初学者，所以我可能会问一些愚蠢的问题。

我想隐藏一个表行，该表行在td中某处包含文本“香蕉”。

希望有人能帮助我，谢谢！

我尝试了各种在Internet上找到的代码，但是无法正常工作。这就是我到目前为止所得到的。

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

Answer 1

您遇到的问题是您似乎在考虑jQuery。 JQuery在后台执行循环。由于您不在jQuery世界中，因此需要自己遍历整个集合。

选择行
遍历行
阅读文字
检查文本是否匹配
如果有，将其隐藏

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

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

2 个答案: