CODEWITHSUNDEEP
jquery
knot22
knot22

Reputation: 2768

filter table rows based on table detail name and text

How can jQuery filter rows in an HTML table be using the name attribute in the td tag and an option value selected by the user from a drop down box?

Here is the HTML:

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h3>filtering table rows</h3>
<label>filter primary</label>
<select>
  <option></option>
  <option>Watertown</option>
  <option>Rockford</option>
  <option>Springfield</option>
  <option>Evansville</option>
</select>
<table>
  <tr>
    <th>ID</th>
    <th>primary</th>
    <th>secondary</th>
    <th>mode</th>
  </tr>
  <tr>
    <td>101</td>
    <td name="primary">Watertown</td>
    <td name="secondary">Rockford</td>
    <td>bus</td>
  </tr>
  <tr>
    <td>102</td>
    <td name="primary">Springfield</td>
    <td name="secondary">Watertown</td>
    <td>car</td>
  </tr>
  <tr>
    <td>103</td>
    <td name="primary">Evansville</td>
    <td name="secondary">Watertown</td>
    <td>bus</td>
  </tr>
</table>
</body>

Here is what I have so far on the jQuery:

// attach event to select box
$('select').on('change', filter);

// filter function
function filter() {
    var selectedOption = $('select').find(':selected').text();

$('td').hide();
$('tr').each(function() {
    $.each(this.cells, function() {
    // need a way to isolate this.cells (td tags) with name attribute equal to "primary" and text within that td tag equal to selectedOption, then hide that table row
  });
});
}

The jQuery doesn't work yet - I'm stuck on how to isolate the needed row(s).

For instance, if the user selects Watertown for the primary filter, the table should display just 1 row - the row that has Watertown shown in the primary column.

enter image description here

Upvotes: 1

Views: 1457

Answers (3)

knot22
knot22

Reputation: 2768

Thanks to Vpa's post, here is what I arrived at for the final code:

// attach event to select box
$('select').on('change', filter);

// filter function
function filter() {
    var selectedOption = $('select').find(':selected').text();

    if (selectedOption) {
    $('tr').hide();
  $('tr').each(function() {
    if($(this).find('[name=primary]').text() == selectedOption) {
    $(this).show();
    }
  });
  $('tr:first').show();
  } else {
    $('tr').show();
  }
}

This version shows the table header row at all times. Also, if the user selects the blank option, all of the table rows are displayed.

Upvotes: 0

Santu Roy
Santu Roy

Reputation: 197

You need to check whether the table td value matches with the selected option, and if matches then make that show. Here is what you can do.

$('select').on('change', filter);

// filter function
function filter() {
    var selectedOption = $('select').find(':selected').text();

$('tr').hide();
$('tr:first').show();
$('table tr').each(function() {
    if($(this).find('[name=primary]').text() == selectedOption){
      $(this).show();
    }
});
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h3>filtering table rows</h3>
<label>filter primary</label>
<select>
  <option></option>
  <option>Watertown</option>
  <option>Rockford</option>
  <option>Springfield</option>
  <option>Evansville</option>
</select>
<table>
  <tr>
    <th>ID</th>
    <th>primary</th>
    <th>secondary</th>
    <th>mode</th>
  </tr>
  <tr>
    <td>101</td>
    <td name="primary">Watertown</td>
    <td name="secondary">Rockford</td>
    <td>bus</td>
  </tr>
  <tr>
    <td>102</td>
    <td name="primary">Springfield</td>
    <td name="secondary">Watertown</td>
    <td>car</td>
  </tr>
  <tr>
    <td>103</td>
    <td name="primary">Evansville</td>
    <td name="secondary">Watertown</td>
    <td>bus</td>
  </tr>
</table>
</body>

Upvotes: 1

Vpa
Vpa

Reputation: 737

You have to display table data based on your selected value

Update I gave <tr id="tableHeading"> to display the table header

Update again remove <tr id> and add tr:first-child in code to display table header

$('select').on('change', filter);

// filter function
function filter() {
    var selectedOption = $('select').find(':selected').val();
    $('tr').each(function(){
         if($(this).find('td[name=primary]').text() == selectedOption){
            $('tr:first-child').show();
            $(this).show();
         }else{
            $('tr:first-child').show();
            $(this).hide();
         }
      });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option></option>
  <option>Watertown</option>
  <option>Rockford</option>
  <option>Springfield</option>
  <option>Evansville</option>
</select>
<table>
  <tr>
    <th>ID</th>
    <th>primary</th>
    <th>secondary</th>
    <th>mode</th>
  </tr>
  <tr>
    <td>101</td>
    <td name="primary">Watertown</td>
    <td name="secondary">Rockford</td>
    <td>bus</td>
  </tr>
  <tr>
    <td>102</td>
    <td name="primary">Springfield</td>
    <td name="secondary">Watertown</td>
    <td>car</td>
  </tr>
  <tr>
    <td>103</td>
    <td name="primary">Evansville</td>
    <td name="secondary">Watertown</td>
    <td>bus</td>
  </tr>
</table>

Upvotes: 1

Related Questions