Question

我有一个来自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类渲染border-left，而类不会应用于此类。

<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属性来渲染border-left
我试图将js函数放在$ datatable.on（'draw.dt'，function（）{}）中;以及$（document）.ready（function（）{}）;
在DOM资源管理器中，取消激活并重新激活非“选定”行的其他CSS属性以解决渲染问题
我强制重新加载click函数中的所有CSS源代码，它解决了渲染问题

非常感谢任何建议

Answer 1

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

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

看一下示例 - 它只添加应该是的边框： https://jsfiddle.net/6x2ubk00/

无论是手动构建还是使用Datatable

，都应该工作相同

CSS JQuery Datatable - 奇怪的渲染

1 个答案: