JQuery Table Row Filter :)
Hi Friends,
Here by I have mentioned a quick piece of JQuery JavaScript code to filter the rows shown in a table.
Full Code :
|
<html>
<head>
<script src="jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function()
{
$("#myinput").keyup(function(){
$("#trbodypart").find("tr").hide();
var
data = this.value.split(" ");
var
jo = $("#trbodypart").find("tr");
$.each(data, function(i, v){
//Use
the new containsIgnoreCase function instead
jo = jo.filter("*:containsIgnoreCase('"+v+"')");
});
jo.show();
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#EEEEEE"});
});
</script>
</head>
<body>
<input id="myinput" value="Type To Filter"><br />
<table style="width: 50%">
<thead>
<tr>
<th>
First Name</th>
<th>
Last Name</th>
</tr>
</thead>
<tbody id=”trbodypart”>
<tr>
<td>
Tarun</td>
<td>
Kumar</td>
</tr>
<tr>
<td>
Jeet</td>
<td>
Bansal</td>
</tr>
<tr>
<td>
Amit</td>
<td>
Kumar</td>
</tr>
<tr>
<td>
Sandeep</td>
<td>
Jain</td>
</tr>
<tr>
<td>
Rakesh</td>
<td>
Sawan</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Awesome
ReplyDelete