How can I filter a table in html through a input in dropdown?

Question

I have a dropdown and a table in an HTML form. I need to filter the table's appearance using the dropdown. The dropdown has four values. If the value 'All' is selected the table should show the entire table. Else the table should show contents as per the value selected in the dropdown table. The table looks like this: enter image description here

This the code:

#mytable {
  width: 100%;
  border-collapse: collapse;
}

.tr {
  background: #808080;
  color: white;
  font-weight: bold;
}

#mytable tb {
  padding: 5px;
  border: 1px solid black;
  text-align: left;
}

#optionsDiv {
  padding-bottom: 10px;
  font-weight: bold;
}

#selectField {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  height: 30px;
  width: 200px;
}

.odd {
  background: #ccffeb;
}

.even {
  background: #99FFD6;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div class="container" style="margin-top:150px;">
    <h1>Paleetu provides a variety of BPM related courses.</h1><br>
    <p> Please select a course from below dropdown</p>
    <select id="myfilter" onchange="myfunction()">
      <option value="all">All Course</option>
      <option value="pegacsa">Pega CSA</option>
      <option value="pegacssa">Pega CSSA</option>
      <option value="camunda">Camunda BPM</option>
    </select>
    <table id="mytable" class="table table-bordered">
      <tbody>
        <tr class="content">
          <th>Start</th>
          <th>End</th>
          <th>Time</th>
          <th>Course</th>
          <th>Price</th>
          <th>Credits</th>
          <th>Location</th>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>9:30AM to 12:30PM</td>
          <td>Pega CSA</td>
          <td>Rs. 14,000</td>
          <td>125</td>
          <td>Bengaluru</td>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>1:30PM to 5:30PM</td>
          <td>Pega CSSA</td>
          <td>Rs. 14,000</td>
          <td>50</td>
          <td>Bengaluru</td>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>1:30PM to 5:30PM</td>
          <td>Camunda BPM</td>
          <td>Rs. 14,000</td>
          <td>90</td>
          <td>Bengaluru</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Can someone please help me filter the table using dropdown value using js or jquery.

Please go read [ask]. We expect you to put in some effort yourself first - you need to make an attempt, at least. — CBroe, Mar 27 '20 at 07:44

connexo · Accepted Answer · 2020-03-27T08:05:29.673

I'll add comments in the code to explain what is going on.

let rows = Array.from(mytable.querySelectorAll('tr.content')); // An array that holds all the table rows
let cellMap = new Map(); // initialize a map 
rows.forEach(row => 
  cellMap.set(
    row, // which we will use to store the rows in as keys
    Array.from(row.querySelectorAll('td'))
      .map(td => td.textContent) // with the rows' table cell text contents as values
  )
);

// instead of using 'onchange'  always prefer to use addEventListener
myfilter.addEventListener('change', function() {
  if (this.value === 'all') { // if 'All' is selected
    rows.forEach(row => row.hidden = false); // unhide each row
    return;
  }
  // otherwise
  const searchTerm = this.selectedOptions[0].textContent; // extract the term we're looking for
  rows.forEach(row => { // iterate over the table rows
    // and for each row, decice whether it should be hidden or not
    row.hidden = !cellMap.get(row).includes(searchTerm); // based on if the searchterm occurs in the cellmap for that row
  })
});

#mytable {
  width: 100%;
  border-collapse: collapse;
}

.tr {
  background: #808080;
  color: white;
  font-weight: bold;
}

#mytable td {
  padding: 5px;
  border: 1px solid black;
  text-align: left;
}

#optionsDiv {
  padding-bottom: 10px;
  font-weight: bold;
}

#selectField {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  height: 30px;
  width: 200px;
}

.odd {
  background: #ccffeb;
}

.even {
  background: #99FFD6;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div class="container" style="margin-top:150px;">
    <h1>Paleetu provides a variety of BPM related courses.</h1><br>
    <p> Please select a course from below dropdown</p>
    <select id="myfilter">
      <option value="all">All Course</option>
      <option value="pegacsa">Pega CSA</option>
      <option value="pegacssa">Pega CSSA</option>
      <option value="camunda">Camunda BPM</option>
    </select>
    <table id="mytable" class="table table-bordered">
      <tbody>
        <tr class="content">
          <th>Start</th>
          <th>End</th>
          <th>Time</th>
          <th>Course</th>
          <th>Price</th>
          <th>Credits</th>
          <th>Location</th>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>9:30AM to 12:30PM</td>
          <td>Pega CSA</td>
          <td>Rs. 14,000</td>
          <td>125</td>
          <td>Bengaluru</td>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>1:30PM to 5:30PM</td>
          <td>Pega CSSA</td>
          <td>Rs. 14,000</td>
          <td>50</td>
          <td>Bengaluru</td>
        </tr>
        <tr class="content">
          <td>1st April 2020</td>
          <td>17th April 2020</td>
          <td>1:30PM to 5:30PM</td>
          <td>Camunda BPM</td>
          <td>Rs. 14,000</td>
          <td>90</td>
          <td>Bengaluru</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

How can I filter a table in html through a input in dropdown?

1 Answers1