I'm facing an issue with filtering a table using an input box within one of the elements.
Whenever I type something in the input box, the table automatically filters its rows based on the input.
The strange thing is that when I try to use display:block to show specific rows, it completely distorts the layout. However, if I utilize jQuery's .toggle(); method, everything works perfectly fine.
Can someone explain why this happens?
Sample HTML structure:
<body>
<table>
<tr><th>Users<input type="text" id="filter"/></th></tr>
<tr class="user" data="patrick"><td>Patrick</td></tr>
<tr class="user" data="john"><td>John</td></tr>
</table>
</body>
Working Filter Script:
$('#filter').keyup(function(){
$(".user").css("display", "none");
if($("#filter").val()!=''){
var filterstr = $("#filter").val().toLowerCase();
$("[data*="+filterstr+"].user").toggle();
}else{
$(".user").toggle();
}
});
When trying to use display:block:
N/A
CSS Styling:
table
{
width: 200px;
}
td
{
border: 1px solid #000;
font: bold 10px Helvetica, Arial, sans-serif;
padding: 5px;
}
th
{
background: #f3f3f3;
border: 1px solid #000;
font: bold 10px Helvetica, Arial, sans-serif;
padding: 5px;
}