duanbi5906 2019-04-04 23:04
浏览 624
已采纳

datatable createdRow为所有行应用背景颜色,尽管条件设置在要应用的行上

Im trying to set background colors for datatable rows depending on the data returned from the server.

I fetch the data dynamically through ajax and it displays successfully on the table, but the color applies to all rows, even when the other if conditions are met.

Heres my code

"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');
    }
},

This instead, makes all rows blue. Even when only 1 row contains 1403

  • 写回答

1条回答 默认 最新

  • dongshan9619 2019-04-04 23:20
    关注

    If your function works well, there are still some logical errors / best writing practices.

    Here is the new code that I would propose:

    "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');
        }
    },
    

    Explanation:

    Your previous code did not check if data[0] was equal to '1403' or '1400', but it set the value '1403' or '1400' to data[0].

    As a reminder :

    The = operator assigns a value to a variable.

    The == operator compares the values of two variables.

    The === operator compares the values and types of two variables.

    In your example, 1400 or 1403 will be of type string, so you can make a strict comparison by asking to compare the value (1400 or 1403) and its type (string) using the === operator.

    To illustrate :

    1400 = '1400' would return an error in the console because it is not possible to assign a value to another non-variable value.

    1400 == '1400' would return true, because the values are the same.

    1400 === '1400' would return false, because the values are the same but not their types.

    Another way to write the function would have been to use a switch. I'll let you look at it here https://www.w3schools.com/js/js_switch.asp

    The function would be:

    "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');
        }
    },
    

    This writing could be clearer and has the advantage of not repeating data[0] === for all the checks.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了