CSS jQuery Datatable - Странный рендеринг

#javascript #jquery #html #css #datatable

#javascript #jquery #HTML #css #с возможностью обработки данных

Вопрос:

У меня есть 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 также отобразит левую границу от «выбранного» класса 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>

Это выглядит так во всех браузерах.
При прокрутке границы часто возникает подобная ошибка.

Это ошибка? Я делаю что-то не так?

Что я пытался решить

Я заглянул в DOM Explorer, и никакое свойство CSS не применяется к не «выбранной» строке для отображения границы слева
Я попытался поместить функцию js в $datatable.on(‘draw.dt’, function () {}); а также в $(document).готово(функция () {});
В проводнике DOM деактивируйте и повторно активируйте другое свойство CSS для невыбраннойстроки, чтобы решить проблему с рендерингом
Я принудительно перезагрузил все источники CSS в функции click, и это решило проблему рендеринга

Любой совет был бы очень признателен

Ответ №1:

Добавление стиля границы для тега TR — не лучшая идея. Как насчет добавления стиля границы к первой ячейке (в моем примере это TD, но может быть и TH) в строке с class ?

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

Посмотрите на пример — он добавляет границу только там, где она должна быть:
https://jsfiddle.net/6x2ubk00 /

Должно работать одинаково, независимо от того, выполняется ли сборка вручную или с Datatable