blog post

The idea is to filter rows with function which will loop through words. Initialization code is very simple. You just need to add textbox call to the Table body .

Source Code

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<title>Table Filter : </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="keywords">
<meta name="author" content="Atul Shukla">

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body style="text-align:center">

<h2>Table Filter</h2>
<p>Type here to filter Table list. <input type="text" id="filtertext" /></p>


<div class="list">
<table>
    <thead>
       <tr><th>S. No.</th>
<th>Name</th>
<th>Age</th>
       </tr>
        </thead>
    <tbody>
       <tr><td>1</td><td>Atul</td><td>26</td></tr>
        <tr><td>5</td><td>Anuj</td><td>24</td></tr>
        <tr><td>4</td><td>Ankit</td><td>20</td></tr>
       <tr><td>3</td><td>Ankush</td><td>13</td></tr>
        <tr><td>2</td><td>Amit</td><td>25</td></tr>
      
   </tbody>
</table>
</div>

<script>
$(document).ready(function(){


$('#filtertext').keyup(function(){
 var val=$(this).val();    
        $('.list table tbody tr').hide();
         var trs=$('.list table tbody tr').filter(function(d){
         return $(this).text().toLowerCase().indexOf(val)!=-1;
         });
         trs.show();   
});

});
</script>
<style>
.list{max-width:500px;margin: 0px auto;}
.list table{width:100%;}    
.list table tr th,.list table tr td{border-left:1px solid #999;border-bottom:1px solid #999;padding :2px 5px;}
.list table{border-top:1px solid #999;border-right:1px solid #999; border-spacing: 0px 0px;
}
</style>
</body>


</html>

Filtering Table rows using Jquery
  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information