Question

我正在尝试根据服务器返回的数据为数据表行设置背景颜色。

我通过ajax动态获取数据，它成功地显示在表上，但是颜色适用于所有行，即使满足条件的其他行也是如此。

在这里输入我的代码

"createdRow": function(row, data, index) {
    console.log(data[0]);
    if ( data[0] = '1403') {
        $(row).css('background-color', 'blue');
    } else if (data[0] = '1400'){
        $(row).css('background-color', 'yellow');
    } else {
        $(row).css('background-color', 'white');
    }
},

这将使所有行变为蓝色。即使只有1行包含1403

Answer 1

如果您的函数运行良好，则仍然存在一些逻辑错误/最佳书写实践。

这是我建议的新代码：

"createdRow" : function(row, data, index) {
    console.log(data[0]);

    if (data[0] === '1403') {
        $(row).css('background-color', 'blue');
    } elseif (data[0] === '1400') {
        $(row).css('background-color', 'yellow');
    } else {
        $(row).css('background-color', 'white');
    }
},

说明：

您之前的代码未检查data[0]等于'1403'或'1400'，但是将值'1403'或'1400'设置为{{1 }}。

提醒一下：

data[0]运算符为变量分配一个值。

=运算符比较两个变量的值。

==运算符比较两个变量的值和类型。

在您的示例中，1400或1403将为字符串类型，因此您可以通过使用===运算符要求比较值（1400或1403）及其类型（字符串）来进行严格比较。< / p>

为了说明：

===将在控制台中返回错误，因为无法将值分配给另一个非变量值。

1400 = '1400'将返回true，因为值相同。

1400 == '1400'将返回false，因为值相同但类型不同。

编写该函数的另一种方法是使用开关。我让你在这里https://www.w3schools.com/js/js_switch.asp

该功能将是：

1400 === '1400'

文字可能更清楚，并且具有不对所有检查重复"createdRow" : function(row, data, index) { console.log(data[0]); switch (data[0]) { case '1403': $(row).css('background-color', 'blue'); break; case '1400': $(row).css('background-color', 'yellow'); break; default: $(row).css('background-color', 'white'); } },的优点。

尽管已设置要应用的行的条件，但仍为所有行应用背景颜色创建了数据表

1 个答案: