我想過濾型別列，一個按鈕過濾水生，另一個按鈕過濾水生
<button type="button" onclick="Aquatic()">Aquatic</button>
<button type="button" onclick="NotAquatic()" >everything but aquatic</button>
<table class="table" >
<thead>
<tr>
<th scope="col">Animal</th>
<th scope="col">Type </th>
</tr>
</thead>
<tbody id="" >
<tr>
<td>bat</td>
<td>aerial</td>
</tr>
<tr>
<td>Fish</td>
<td>Aquatic</td>
</tr>
<tr>
<td>Horse</td>
<td>Land</td>
</tr>
<tr>
<td>Shark</td>
<td>Aquatic</td>
</tr>
<tr>
<td>Elephant</td>
<td>Land</td>
</tr>
<tr>
<td>Whale</td>
<td>Aquatic</td>
</tr>
<tr>
<td>dove</td>
<td>aerial</td>
</tr>
</tbody>
</table>uj5u.com熱心網友回復：
希望這有助于為您指明正確的方向！有一個 filterTable 函式，它抓取所有表格行，并洗掉以前添加到顯示的任何行內樣式更改。然后，我tr通過不包括術語的 innerHTML 內容過濾所有s，并將所有這些trs 設定為無顯示
function filterTable(aquaShown) {
const trs = [...document.querySelectorAll("tbody tr")];
trs.forEach(tr => tr.style.display = "");
const hiddenTrs = aquaShown ?
trs.filter(tr => !tr.innerHTML.includes("Aquatic")) :
trs.filter(tr => tr.innerHTML.includes("Aquatic"));
hiddenTrs.forEach(tr => tr.style.display = "none");
}
function aquatic() {
filterTable(true);
}
function nonaquatic() {
filterTable(false);
}<button type="button" onclick="aquatic()">Aquatic</button>
<button type="button" onclick="nonaquatic()">Non-Aquatic</button>
<table class="table">
<thead>
<tr>
<th scope="col">Animal</th>
<th scope="col">Type </th>
</tr>
</thead>
<tbody id="">
<tr>
<td>Fish</td>
<td>Aquatic</td>
</tr>
<tr>
<td>Horse</td>
<td>Land</td>
</tr>
<tr>
<td>Shark</td>
<td>Aquatic</td>
</tr>
<tr>
<td>Elephant</td>
<td>Land</td>
</tr>
<tr>
<td>Whale</td>
<td>Aquatic</td>
</tr>
</tbody>
</table>編輯根據評論中的進一步說明進行重構
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336951.html
標籤：javascript html 查询
上一篇：如何選擇最后一個*之后的句子