Question

我正在尝试迭代DataTable中列（列索引1）中的所有单元格，并使用以下代码根据单元格值更改背景颜色：

var table = $('#my_table').DataTable( {...});
console.log("next, iterate over rows in table: "+table);
table.rows().every( function ( rowIdx, tableLoop, rowLoop ) { 
    console.log("looping over rows");
    var cell = table.cell({ row: rowIdx, column: 1 }).node();
    if (cell.data() == 'mouse'){
        $(cell).css('background-color', 'orange');
    }
});
console.log("finished iterating over rows ");

该表正在显示数据。但是控制台日志打印：

>>next, iterate over rows, table: [object Object]
>>finished iterating over rows

即

table.rows().every( function (...){...}

未输入。我从DataTables示例中复制并粘贴，我不知道为什么它没有被执行。

我唯一能想到的是DataTables文档：https://datatables.net/reference/api/rows().every()提及 - 迭代每个选定的行。表格中的所有行都不是选择，我只想循环遍历每一行（并更改单元格颜色）如果选择了它们。

注意我也尝试过：

table.rows().eq(0).each( function ( index ) {
    var row = table.row( index );
    var data = row.data();
    console.log(data)
});

这也没有执行（console.log不会在函数内部打印任何内容）。

Answer 1

您可以遍历表格的 td 元素并捕获每个单元格的文本内容。

对这些应用一些逻辑，您可以轻松分配每个单元格的背景颜色。

我使用了arr.map（）作为它的ES6 JavaScript，但.each（）也可以。

$('table td').map(function(i, cell) {
    var cellContent = $(cell).text();
    console.log(i,cellContent);  // for demonstration
    if (cellContent === 'pending') $(cell).css('background-color', '#ccc');
});

可以轻松更改此内容以获取单元格元素的数据，类或ID。

jQuery DataTables迭代行并更改单元格背景

1 个答案: