I am encountering an issue with a DataTable from datatables.net. Each row can be selected by clicking on a checkbox, which triggers a click event. In response to the event, I add or remove a CSS class to change the appearance of the selected rows.
$(".cbDatatable").on('click', (function (evt) {
$(this).closest('tr').removeClass('selected');
evt.stopImmediatePropagation();
}
else {
$(this).closest('tr').addClass('selected');
evt.stopImmediatePropagation();
}
}));
The CSS class alters the background color and adds a small blue border to the left side of the row.
.selected{background-color: #fafafa; border-left: 4px solid #0e8ae8;}
This functionality is working perfectly fine.
The Issue
However, when I select one row and then select another row two spaces away, the row in between also displays the border from the 'selected' CSS class, despite not having the class applied to it.
<body>
<tr class="odd selected" role="row">
<tr class="even" role="row"> <-- This one
<tr class="odd selected" role="row">
<tr class="even" role="row">
<tr class="odd" role="row">
<tr class="even selected" role="row">
</tbody>
This is how it appears on all browsers. Additionally, scrolling often causes the border to appear like this.
I am unsure if it is a bug or if I am implementing something incorrectly.
Attempted Solutions
- I examined the DOM explorer and found that no CSS property is being applied to the non-selected rows to render the left border.
- I tried placing the JavaScript function inside both the $datatable.on('draw.dt', function () {}) and the $(document).ready(function () {}).
- In the DOM explorer, deactivating and reactivating another CSS property of the non-selected row resolved the rendering issue.
- To resolve the rendering problem, I forced a reload of all CSS sources within the click function.
Any advice or guidance would be greatly appreciated.