论坛 › 设计开发 › 数据表格的自定义样式：DatatablePC

scmarine 发表于 2024-9-4 10:24:00

数据表格的自定义样式：DatatablePC

O2版本：V9.0.2

有一个表格DatatablePC，其中有3行3列数据，在渲染数据的时候，如何根据表格中渲染的数据，设置背景颜色？

例如：根据days的数量，设置不同的背景颜色和字体颜色：
10天以内：设置该单元格背景：蓝色
20天以内：设置该单元格背景：黄色
30天以上：设置该单元格背景：红色
谢谢管理员

论坛管理员 发表于 2024-9-6 10:00:47

参考

// 设置数据表格的第三例，如果是大于10，就设置背景色为空色
var datatable = this.form.get("datatable").node;
var table = datatable.querySelector("table");

var rows = table.getElementsByTagName('tr');
for (var i = 1; i < rows.length; i++) {
    var thirdColumn = rows.getElementsByTagName('td');
    if (thirdColumn) {
      var value = thirdColumn.textContent || thirdColumn.innerText;
      var number = parseFloat(value);
      if (!isNaN(number)) {
            if (number > 10) {
                thirdColumn.style.backgroundColor = 'red';
            } else if (number < 10) {
                // 如果小于10，不做任何操作（或者你可以设置为其他颜色）
            } else {
                // 如果等于10，也不做任何操作
            }
      } else {
            console.log('第三列的数据不是数字');
      }
    }
}

scmarine 发表于 2024-9-6 15:26:21

论坛管理员 发表于 2024-9-6 10:00
参考

// 设置数据表格的第三例，如果是大于10，就设置背景色为空色


优秀，谢谢管理员！

查看完整版本: 数据表格的自定义样式：DatatablePC