Highlight HTML Table Row based on the Row Data Using jQuery
At times there will be requirements to highlight a table row based on a data in that row. For example, highlighting a table row which has a specific data in order to differentiate it from other rows.
The below jQuery snippet will highlight the row which has the word "Satheesh" contained in one of the table cell.
<title></title>
<style>
.row
{
background-color:Yellow;
}
</style>
<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
$('#Students td:contains(Satheesh)').parent().addClass('row');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="Students">
<tr><td>1</td><td>Babu</td></tr>
<tr><td>2</td><td>Satheesh</td></tr>
<tr><td>3</td><td>Ramesh</td></tr>
<tr><td>4</td><td>Venki</td></tr>
<tr><td>5</td><td>Abhishek</td></tr>
</table>
</div>
</form>
Another thing to note in the above code is, it will highlight all the rows that have the string "Satheesh" in any of its TD.
If you want to check the specific TD instead of checking all the TD's in a row,
$('#Students td:nth-child(2):contains(Satheesh)').parent().addClass('row');
The above code will search for the word "Satheesh" only in second TD of every row.
|