Show/Hide specific rows in table when link is clicked

Question

I have a table which contains categories of info on each row and many rows may have the same category.

I have a menu of all the categories (a very simple vertical text menu in a 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>

When I click on a specific category link in that menu I want it to only show the rows that match that category in the table.

---

I'm new to Javascript, etc so still learning. I've searched on Google but can only find examples that seem to hide/show 1 row or something similar but not what I need it to do. I can't work out if it's possible to do what I described above. Any help will be much appreciated!

Answer 1

Issues in your code

1. You need to identify your table rows by category.

   • Using id to assign a category to multiple rows is wrong (Duplicate ID values is invalid HTML).
   • You can use class, but personally I prefer to attributes since that value is meant to use within JS and not styling.

2. The default behavior of anchors is to redirect, refresh (or move the scrollbar), to make it short this isn't the element you need to use. I will replace it with a button.

A solution

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