CSS JQuery Datatable - 奇怪的渲染答案

【问题标题】：CSS JQuery Datatable - Strange renderingCSS JQuery Datatable - 奇怪的渲染
【发布时间】：2023-03-21 10:47:01
【问题描述】：

我有一个来自 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 行也会呈现“选定”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>

It looks like that on every browsers。如果我滚动，边框经常会出错like that。

这是一个错误吗？我是不是做错了什么？

我试图解决的问题

我查看了 DOM 资源管理器，没有在非“选定”行上应用 CSS 属性来呈现左边框
我尝试将js函数放在$datatable.on('draw.dt', function () {});以及在 $(document).ready(function () {});
在 DOM 资源管理器中，停用并重新激活非“选定”行的其他 CSS 属性可解决呈现问题
我在click函数中强制重新加载所有CSS源，它解决了渲染问题

任何建议将不胜感激

【问题讨论】：

如果可能的话，能否请你提供你的代码的js小提琴链接？

标签： javascript jquery html css datatable

【解决方案1】：

为 TR 标签添加边框样式不是最好的主意。如何将边框样式添加到第一个单元格（在我的示例中它是 TD，但它可能是 TH）在与类的行中？

.selected td:first-child{
  border-left: 4px solid #0e8ae8;
}

查看示例 - 它只在应有的位置添加边框： https://jsfiddle.net/6x2ubk00/

无论是手动构建还是使用 Datatable 构建，都应该可以正常工作

【讨论】：

上升。对不起。我已经编辑了我的答案并添加了工作 jsfiddle url
确实可以解决问题，非常感谢。