I'm currently working on a table that allows users to select rows, and I've implemented some CSS to highlight the selected row. The issue arises when new rows are added to the table as they do not get highlighted when selected.
HTML Portion:
<table class="table_to_fill" id="table_id">
<thead>
<tr>
<th> Title 1 </th>
<th> Title 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Old Row 1 </td>
<td> Old Row 1 </td>
</tr>
<tr>
<td> Old Row 2 </td>
<td> Old Row 1 </td>
</tr>
</tbody>
</table>
CSS :
.table_to_fill tr:hover, .table_to_fill tr.selected {
background-color: #1E90FF;
color : #fff;
font-weight : bold;}
Javascript :
$(".table_to_fill tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
//to add rows
$("#add_row_button").click(function(){
$('#table_id tr:last').after('<tr><td>new row</td><td>new row</td></tr>');
});
If anyone could provide insight into what might be going wrong here, it would be greatly appreciated. Thanks in advance for any assistance.