Как установить цвет для строк таблицы на основе значения столбца в таблице данных jQuery

Я использую jQuery datatables. У меня есть следующие данные:

Column1 Column2 Column3
-----------------------
 AAA    BBB     CCC
 AAA    GGG     YYY
 BBB    ooo     LLL

Теперь в столбце 1 для первых 2 строк у меня есть одно и то же значение AAA. Я хочу применить некоторый цвет к тем  rows.And then another color для третьей строки. Подобно этому у меня есть 30 записей. Возможно ли это сделать. Если возможно, как я могу это сделать. Я использую таблицы данных jQuery. Спасибо заранее.

Ответы

Ответ 1

Используйте fnRowCallback (или новее rowCallback) для достижения этого

$('#example').dataTable({
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        switch(aData[0]){
            case 'AAAA':
                $(nRow).css('color', 'red')
                break;
            case 'BBBB':
                $(nRow).css('color', 'green')
                break;
            case 'CCCC':
                $(nRow).css('color', 'blue')
                break;
        }
    }
});

Демо: Fiddle

Ответ 2

API недавно изменился, теперь вы должны использовать aData ['Column1'] вместо aData [0]

Ответ 3

createdRow была добавлена ​​в v 1.10

Этот обратный вызов выполняется при создании элемента TR (и все дочерние элементы TD) или зарегистрирован при использовании источника DOM, что позволяет манипулировать элементом TR.

Это особенно полезно при использовании отложенного рендеринга (deferRender) или обработки на стороне сервера (serverSide), чтобы вы могли добавлять события, информацию о имени класса или иным образом форматировать строку при ее создании.

https://datatables.net/reference/option/createdRow

Пример:

    $('#example').dataTable({
        // ...
        "createdRow": function( row, data, dataIndex ) {
            if ( data["column_index"] == "column_value" ) {
                $( row ).css( "background-color", "Orange" );
                $( row ).addClass( "warning" );
            }
        },
        // ...
    });