我正在尝试遍历 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() mention- 迭代每个选择的行。表格中的所有行都未被选中,我只想遍历每一行(并更改单元格颜色),而不管它是否被选中。
注意我也试过:
table.rows().eq(0).each( function ( index ) {
var row = table.row( index );
var data = row.data();
console.log(data)
});
这也没有执行(console.log 不从函数内部打印任何内容)。
最佳答案
您可以遍历表格的 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。
关于javascript - jQuery DataTables 遍历行并更改单元格背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41909969/