Javascript CSS JQuery数据表-奇怪的呈现_Javascript_Jquery_Html_Css_Datatable

Javascript CSS JQuery数据表-奇怪的呈现

javascript jquery html css

Javascript CSS JQuery数据表-奇怪的呈现,javascript,jquery,html,css,datatable,Javascript,Jquery,Html,Css,Datatable,我有一个datatables.net中的Datatable，在这个datatables.net中，可以通过复选框上的单击事件来选择每一行。触发事件时，我添加或删除CSS类以更改外观 $(".cbDatatable").on('click', (function (evt) { $(this).closest('tr').removeClass('selected'); evt.stopImmediatePropaga

我有一个datatables.net中的Datatable，在这个datatables.net中，可以通过复选框上的单击事件来选择每一行。触发事件时，我添加或删除CSS类以更改外观

$(".cbDatatable").on('click', (function (evt) {
                    $(this).closest('tr').removeClass('selected');
                    evt.stopImmediatePropagation();
                }
                else {
                    $(this).closest('tr').addClass('selected');
                    evt.stopImmediatePropagation();
                }
            }));

CSS类只需更改背景颜色并在行的左侧添加一点蓝色边框

.selected{background-color: #fafafa; border-left: 4px solid #0e8ae8;}

这很好用

问题

但是如果我选择n+1行，然后选择n+3行，n+2行也会呈现“selected”CSS类左侧的边框，而该类不会应用于它

<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>


为TR标记添加边框样式不是最好的主意。
将边框样式添加到类所在行的第一个单元格（在我的示例中是TD，但可能是TH）中如何
.selected td:first-child{
  border-left: 4px solid #0e8ae8;
}

请看示例-它只在应该的位置添加边框：

无论是手动构建还是使用Datatable构建，都应该是相同的
如果可能，请提供代码的js fiddle链接？Ups。很抱歉我已经编辑了我的答案并添加了工作JSFIDLE urlIt接缝来解决这个问题，非常感谢。