jQuery DataTables 遍历行并更改单元格背景

Posted 2023-05-08

【中文标题】jQuery DataTables 遍历行并更改单元格背景

【英文标题】：jQuery DataTables iterate over rows and change cell background

【发布时间】：2017-06-14 01:54:10

【问题描述】：

我正在尝试遍历 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() 提到-遍历每个 selected 行。表中的所有行都没有被选中，我只想循环遍历每一行（并更改单元格颜色），不管它是否被选中。

注意我也试过了：

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

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

【参考方案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。

【讨论】：

我在页面上有几个表格，所以这不起作用。我尝试只选择我的表，但我不知道如何选择 td，例如 $('#my_table td') 但这不起作用。

我必须在 DataTable 声明中的 "fnInitComplete": function (oSettings, json) 块中添加您的代码。