Tengo una tabla que contiene categorías de información en cada fila y muchas filas pueden tener la misma categoría.
Tengo un menú de todas las categorías (un menú de texto vertical muy simple en un div).
<div class="menu"> <a href="">Category 1</a> <a href="">Category 2</a> <a href="">Category 3</a> </div> <table border="1"> <tr id="cat1"> <td>some info</td> </tr> <tr id="cat2"> <td>blah blah</td> </tr> <tr id="cat1"> <td>more blah</td> </tr> </table>Cuando hago clic en el enlace de una categoría específica en ese menú, quiero que solo muestre las filas que coinciden con esa categoría en la tabla.
Soy nuevo en Javascript, etc., así que sigo aprendiendo. He buscado en Google pero solo puedo encontrar ejemplos que parecen ocultar/mostrar 1 fila o algo similar, pero no lo que necesito que haga. No puedo averiguar si es posible hacer lo que describí anteriormente. ¡Cualquier ayuda será muy apreciada!
Debe identificar las filas de su tabla por categoría.
id para asignar una categoría a varias filas es incorrecto (los valores de ID duplicados son HTML no válido).class , pero personalmente prefiero los attributes ya que ese valor está destinado a usarse dentro de JS y no al estilo. El comportamiento predeterminado de los anchors es redirigir, actualizar (o mover la barra de desplazamiento), para abreviar, este no es el elemento que necesita usar. Lo reemplazaré con un button .
// Selecting all the filters (buttons) document.querySelectorAll('[catFilter]').forEach((el)=>{ //console.log(el); // Listenning to clicks on the filters el.addEventListener('click', (ev)=>{ // Selecting all the table rows when the click happens // This will happen everytime you click! document.querySelectorAll('table tr').forEach((row)=>{ //console.log(row); if(ev.target.value === "*"){ // Show all row.classList.remove('hidden'); }else if(row.hasAttribute(ev.target.value)){ // Make sure that the filtered rows are shown row.classList.remove('hidden'); }else{ // Hide everything else row.classList.add('hidden'); } }) }) }) .hidden { display: none; } <button value="cat1" catFilter>cat1</button> <button value="cat2" catFilter>cat2</button> <button value="*" catFilter>All categories</button> <table border="1"> <tr cat1> <td>some info</td> </tr> <tr cat2> <td>blah blah</td> </tr> <tr cat1> <td>more blah</td> </tr> </table>