Quiero filtrar la columna tipo, un botón filtra los acuáticos y en el otro todos menos los acuáticos
<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>¡Espero que esto te ayude a orientarte en la dirección correcta! tiene una función filterTable que toma todas las filas de la tabla y elimina cualquier cambio de estilo en línea agregado previamente para mostrar. Luego, filtro todos los tr s por el contenido HTML interno sin incluir el término, y tomo todos esos tr s y configuro su visualización en ninguno
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>EDITAR refactorizado en base a aclaraciones adicionales en los comentarios