jQuery Tutorial

Simple Filter HTML Table Rows in jquery

filter

filter function can be used to filter or search the text in the html table rows or list of items or any paragraph.

.filter()

filter with class name

filters the div elements with matching class name 'class_name'.

$( "div" )
  .css( "background", "green" )
  .filter( ".class_name" )
    .css( "color", "red" );

filter with attributes

filter can use function to check each elements using attributes or index.

$( "div" )
  .css( "background", "green" )
  .filter(function( index ) {
    return index === 2 || $( this ).attr( "name" ) === "divTest";
  })   
  .css( "color", "red" );

Filter the rows in html table using jquery

jQuery scripts to filter the html table 'students' when entering letter in search textbox.

$(document).ready(function(){
  $("#txtSearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    // if html table rows need to be filtered or searched, can be list or any content section id.
    $("#tblStudents tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Html content to define students table and searching input textbox.

<input id="txtSearch" type="text" placeholder="Search..">
<br>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody id="tblStudents">
    <tr>
      <td>1</td>
      <td>Student1</td>
      <td>10</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Student2</td>
      <td>8</td>
    </tr>

  </tbody>
</table>

jQuery Example Code - Simple HTML table filters

Filters the html table rows using search text based on all the columns in each rows.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
  $("#txtSearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    // if html table rows need to be filtered or searched, can be list or any content section id.
    $("#tblStudents tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</head>
<body>
 
<input id="txtSearch" type="text" placeholder="Search.."></input>
<br>

<table width="30%" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody id="tblStudents">
    <tr>
      <td>1</td>
      <td>Student1</td>
      <td>10</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Student2</td>
      <td>8</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Student3</td>
      <td>9</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Student4</td>
      <td>11</td>
    </tr>
  </tbody>
</table>
 

 
</body>
</html>

Output:

Before searching: