As developers, we are constantly looking for ways to make our websites more interactive and user-friendly. One common feature that many websites have is the ability to select and highlight rows of data. This is especially useful for tables and lists, where users can quickly identify and compare different items.
In this article, we will explore how to use jQuery to highlight rows in a table when a checkbox is clicked. This simple but powerful technique can enhance the user experience and make your website more dynamic.
To get started, let's create a basic HTML table with some sample data:
```
<table>
<tr>
<th>Item</th>
<th>Price</th>
<th>In Stock</th>
</tr>
<tr>
<td>Shirt</td>
<td>$20</td>
<td><input type="checkbox" class="select-row"></td>
</tr>
<tr>
<td>Pants</td>
<td>$30</td>
<td><input type="checkbox" class="select-row"></td>
</tr>
<tr>
<td>Shoes</td>
<td>$50</td>
<td><input type="checkbox" class="select-row"></td>
</tr>
</table>
```
As you can see, each row has a checkbox with the class "select-row". Next, we need to add some CSS to style our table and checkboxes:
```
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
input[type="checkbox"] {
margin: 0;
}
```
Now, let's move on to the jQuery code. We will use the "change" event to detect when a checkbox is clicked. Then, we will use the "closest" method to target the parent row and add a class to it:
```
$(document).ready(function() {
$('.select-row').change(function() {
if($(this).is(':checked')) {
$(this).closest('tr').addClass('highlight');
} else {
$(this).closest('tr').removeClass('highlight');
}
});
});
```
The "highlight" class in our code is what will add the background color to the selected row. Now, when a user clicks on a checkbox, the corresponding row will be highlighted with a light grey background. They can also click on multiple checkboxes to highlight multiple rows.
But what if we want to remove the highlight when a checkbox is unchecked? We can use the "not" method to target the unchecked checkboxes and remove the highlight class from their parent rows:
```
$('.select-row').not(':checked').closest('tr').removeClass('highlight');
```
Finally, let's add some CSS to our "highlight" class to make the selected rows stand out:
```
.highlight {
background-color: #c7c7c7;
}
```
And there you have it! With just a few lines of code, we have enabled the ability to highlight rows in a table using checkboxes and jQuery.
This technique can be applied to various scenarios, such as selecting and highlighting multiple rows at once or using different CSS styles for selected and un
