I am using a jQuery script to filter a table with multiple entries on this site. The filtering works well, but the issue arises when it comes to maintaining the correct tr:nth-child(odd) color that I have specified in my CSS. After filtering, the original color is retained instead of the updated one. To clarify further, refer to the JSFiddle demo link provided at the bottom of the page.
Customized HTML Code:
<input type="text" id="search" placeholder="Search...">
<table id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Chantal</td>
<td>37</td>
<td>Belgium</td>
</tr>
<tr>
<td>Pedro</td>
<td>31</td>
<td>Spain</td>
...
</table>
CSS Styles Applied:
#search {
height: 20px;
margin: 4px 0;
padding: 5px 5px;
/>ped: #E5C100;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
table {
width: 100%;
borde ...
}
tr:nth-child(odd) {
background-color: #E5E5E5;
}
JavaScript (jQuery) Functionality:
var $rows = $('#table tr:not(:first)');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ')... }).hide();
});
Try out the functionality through the JSFiddle Demo Link provided below:
https://jsfiddle.net/8m6p1k96/
Your assistance is greatly appreciated!