How to filter data of a html-table with a drop-down-menu with javascript

Question

I have a html-file which makes a table with 3 columns and dynamic rows. The data for the table will be read in from a java project. The java project doesn't matter here. I also did a drop-down-menu on my table for the first column with two entries. Now I would like to filter my table when I choose one entry of the drop-down-menu. How can i do that? How do I need to use JavaScript here?

See the code below (only html because I don't know what to do in Javascript)

<table>
    <colgroup>
        <col width="150" style="background-color:red"></col>
        <col width="165"></col>
    </colgroup>
    <tr  style ="background-color:grey">
        <th>
            Plane
            <select size="2" name="choice">
                <option selected="selected">number_1</option>
                <option>number_2</option>                       
            </select>                   
        </th>   
        <th>date</th>
        <th>addition</th>
    </tr>


    <xsl:for-each select="logstore/plane/trigger">
    <tbody>
        <tr>
            <td><xsl:value-of select="../name"/></td>
            <td><xsl:value-of select="date"/></td>
            <td><xsl:value-of select="addition"/></td>
        </tr>
    </tbody>
    </xsl:for-each>
</table>

You would need to attach an onchange event to your drop down, then either do some hide and show magic for rows in your table, or send an ajax request to the server to return only results that match your filter and re-populate your table body. — Ryan Wilson
– Ryan Wilson, Commented Apr 4, 2019 at 16:06

Cat · Accepted Answer · 2019-04-04 17:30:09Z

2

You can do it like this:

(adapted from this tutorial, with the input element replaced by a select element and the onkeyup attribute replaced by oninput -- See comments in the code for further explanation of how it works)

function filterTable() {
  // Variables
  let dropdown, table, rows, cells, country, filter;
  dropdown = document.getElementById("countriesDropdown");
  table = document.getElementById("myTable");
  rows = table.getElementsByTagName("tr");
  filter = dropdown.value;

  // Loops through rows and hides those with countries that don't match the filter
  for (let row of rows) { // `for...of` loops through the NodeList
    cells = row.getElementsByTagName("td");
    country = cells[1] || null; // gets the 2nd `td` or nothing
    // if the filter is set to 'All', or this is the header row, or 2nd `td` text matches filter
    if (filter === "All" || !country || (filter === country.textContent)) {
      row.style.display = ""; // shows this row
    }
    else {
      row.style.display = "none"; // hides this row
    }
  }
}

<select id="countriesDropdown" oninput="filterTable()">
  <option>All</option>
  <option>Sweden</option>
  <option>Germany</option>
</select>

<table id="myTable">
  <tr><th>Name</th><th>Country</th></tr><!-- header row uses 'th' instead of 'td' -->
  <tr><td>Inga</td><td>Sweden</td></tr>
  <tr><td>Helena</td><td>Sweden</td></tr>
  <tr><td>Hans</td><td>Germany</td></tr>
  <tr><td>Anna</td><td>Germany</td></tr>
</table>

answered Apr 4, 2019 at 17:30

Cat

4,2502 gold badges13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Checka Over a year ago

Thanks cat but that code is not working until you use "onchange" instead of "oninput" because "oninput" will not work in <select>, so "onchange" does. You also need to have a reference to your JavaScript file with <script type="text/javascript" src="/../../filterTable.js"></script>

Cat Over a year ago

It seems to work fine in the snippet. No external file is necessary to run a script on an html page, but referencing an external file is a good idea to keep your programming separate from your markup. Even better would be to remove the oninput (or onchange) attribute and handle that part in the JS code with document.getElementById("countriesDropdown").addEventListener("change","filterTable"); I'm glad you found something that works for you.

Collectives™ on Stack Overflow

How to filter data of a html-table with a drop-down-menu with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related