Troy Bryant Ответов: 3

Как динамически настроить таблицы данных css для отдельных ячеек

Привет -

Я использую таблицы данных jquery. То, что я пытаюсь сделать, - это настроить css столбца на основе другого столбца, если он содержит символ@. Итак, вот код, который я пробовал и, похоже, не могу заставить работать. Вот как визуализируется таблица.

var table = $("#datatable").DataTable({
    searching:false,
    data: data,
    columns: [
        {
           'className': 'details-control',
           'data': null,
           'defaultContent': ''
        },
        {
            'data': 'id',
            'render': function (id) {
                return '<a href=' + 'Default_XXXXX.aspx?XXXX='+ id + '>' + id+'</a>'
            }
        },
        { 'data': 'orderId' },
        { 'data': 'description'},
        { 'data': 'machineType' },
        { 'data': 'manufacturer' },
        {
            'className': 'valid-id',
            'data': null,
            'defaultContent': '',
            'sortable': false,
            'render': function (id) {
                var validId = $(this).closest('tr').find('td:eq(1)').text();


                if (validId.charAt(0) === "@") {

                    $("#datatable tbody").closest('tr').find('td:eq(6)').removeClass('valid-id');
                    //$("#datatable tbody").closest('tr').find('td:eq(6)').addClass('invalid-id');
                }
            }
        }
    ]
});


Что я уже пробовал:

Я попытался сначала найти текст удостоверения личности. Затем с помощью подстроки или символа charAt определите, был ли первый символ символом"@". затем оттуда найдите ячейку таблицы, удалите начальный класс и добавьте недопустимый класс. Я даже пробовал использовать регулярное выражение, но в рендере ничего не происходит.

3 Ответов

Рейтинг:
2

Sergey Alexandrovich Kryukov

У вас либо есть статические классы CSS и вы можете динамически добавлять/удалять их в/из элемента, либо просто использовать HTMLElement.style.* свойства немедленно. Последний вариант, вероятно, очевиден, а второй делается в jQuery следующим образом:
.addClass() | jQuery API документация[^],
.removeClass() | jQuery API документация[^],
.toggleClass() | документация по API jQuery[^],
смотреть также Документация по API CSS | jQuery[^].

—СА

Рейтинг:
1

4d.kh4n

Это решение поможет решить мою проблему, возможно, поможет вам.

для получения дополнительной информации проверьте эту ссылку: столбцы.createdCell

С помощью createdCell манипулируйте DOM в параметрах columnDefs.

Например, 

var table = $("#datatable").DataTable({
searching:false,
data: data,
"columnDefs": [
{
   "targets": [1] // first CELL That will be checked,
   "createdCell": function (td, cellData, rowData, row, col) {
             if (cellData < 1) {
                 $(td).addClass('someClass');
              }
    }
 },{
   "targets": [2] //second CELL That will be checked,
   "createdCell": function (td, cellData, rowData, row, col) {
             if (cellData < 1) {
                 $(td).addClass('someClass');
              }
    }
 }  ],
...Etc

Рейтинг:
0

Richard Deeming

Почему вы используете $("#datatable tbody").closest('tr')?

Вот и ищем самого близкого tr элемент, который является родителем элемента tbody элемент. Если вы не вложите свои таблицы, это не сработает.

Я подозреваю, что вы хотели использовать $(this).closest('tr') вместо.

Кроме того, индекс перешел к .эквивалент()[^] основан на нуле. Вы пытаетесь изменить седьмой ячейка в строке, но похоже, что вы хотите изменить шестой вместо этого клетка.

'render': function (id) {
    var validId = $(this).closest('tr').find('td:eq(1)').text();
    if (validId.charAt(0) === "@") {
        $(this).closest('tr').find('td:eq(5)').removeClass('valid-id');
        //$(this).closest('tr').find('td:eq(5)').addClass('invalid-id');
    }
}

Troy Bryant

сделал это изменение, но все еще не могу удалить этот класс

Richard Deeming

Добавляется ли класс после того, как ячейка была отрисована?

Попробуйте добавить console.log($(this).closest('tr')); к функции, чтобы проверить, правильно ли она находит строку.

Troy Bryant

класс добавляется по мере инициализации таблицы

Richard Deeming

И выход из него console.log? Это поиск родителя tr?

Troy Bryant

Это поиск текущей строки таблицы.

Richard Deeming

Итак, является ли седьмая ячейка этой строки той, которую вы хотите изменить? Основываясь на вашем вопросе, я подозреваю, что вы хотите изменить шестой вместо этого клетка.

NB: Индекс перешел к eq(...) основан на нуле, так что eq(6) дает вам возможность седьмой соответствующий предмет.

Troy Bryant

Я хочу изменить класс 6-й ячейки таблицы

Richard Deeming

Ладно, как я уже сказал, тебе нужно переодеться eq(6) к eq(5).

Troy Bryant

Я понятия не имею, о чем я думал и почему я пытался это сделать. Просто просто пойти за именем класса и удалить его сработало.