I have an HTML table like the example below which contains categories of info on each row. Some rows might have the same category:

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

I have a menu on the left of the table with each of the categories listed Cat1, Cat2, etc. like this:

Its just a very simple vertical text menu in a div on the left like the example below:
    <div >
<a href="">Category 1</a>
<BR>
<a href="">Category 2</a>
<br>
<a href="">Category 3</a>
</div>

I want it so that when you click on a specific category link in that menu it will 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!

CodePudding user response：

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>