Menu
I have a Datatable from datatables.net on which each rows can be selected with a click event on a checkbox. When the event is triggered, I add or remove a CSS class to change the look.
$(".cbDatatable").on('click', (function (evt) {
$(this).closest('tr').removeClass('selected');
evt.stopImmediatePropagation();
}
else {
$(this).closest('tr').addClass('selected');
evt.stopImmediatePropagation();
}
}));
The CSS class simply change the background color and add a little blue border en the left side of the row.
.selected{background-color: #fafafa; border-left: 4px solid #0e8ae8;}
This is working just fine.
The problem
But if I select the n+1 row and then the n+3 row, the n+2 row also render the border-left from the 'selected' CSS class whereas the class is not applied on 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>
It looks like that on every browsers. If I scroll, the border often bug like that.
Is it a bug ? Am I doing something wrong ?
What I tried to solve it
Any advice would be very appreciated
965
Adding border style for TR tag is not best idea. How about adding border style to first cell (in my example it's TD but it might be TH) in row with class ?
.selected td:first-child{
border-left: 4px solid #0e8ae8;
}
Look at example - it only adds border where it should be: https://jsfiddle.net/6x2ubk00/
Should work same regardless if it's build manually or with Datatable
200
answered Jul 03 '26 05:07
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With