隱藏帶有文本內容的tr（表行）

Question

我正在嘗試使用javascript和CSS隱藏表格行。 我必須承認我還是個初學者，所以我可能會問一些愚蠢的問題。

我想隱藏在td中某處包含文本“香蕉”的表格行。

希望有人可以幫助我，謝謝！

我嘗試了在互聯網上找到的各種代碼，但是無法正常工作。 這就是我到目前為止所得到的。

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> 

這怎么會失敗？ 當文本在單元格之間連接時，沒有空格，因此您可以進行不存在的匹配。 您是否正在尋找部分被另一詞叮st的東西，這也可能是錯誤的。

您還有其他選擇，而不是遍歷行，而是遍歷單元格。 如果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>