CSS Color表基于每行的输入

时间:2017-08-04 20:33:59

标签: css colors styling css-tables

是否可以根据每行特定列中的输入为每个表行着色?

示例,如果:
B1 = 1 //红色行
B2 = 1 //红色行
B3 = 3 //蓝排
B4 = 2 //绿色行
B5 = 1 //红色行

等等? 它是一个数据表,并且会自动将新行填充到表中,这些行也应该在系统之后着色。

1 个答案:

答案 0 :(得分:0)

Demo

    var dataSet = [['Dadar', 'lmsSenitaD', 'Atul salaskar', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Come back and Join', 'Mobile', 'Times','1'],
['Aundh', 'Rashmi', 'Preeti Gupta', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Will Discuss with Family', 'Online Campaign', 'Iksula','2'],
['Do@Home_Thane', 'Rashmi', 'Mitali Gupta', '9876543210', '', 'Joined - Old Date', '10/01/2014', '20/08/2014', 'Come back and Join', 'Online Campaign', 'Iksula','4']];

$(document).ready(function () {
    $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

    $('#example').dataTable({
        "data": dataSet,                
        "columns": [
                        { "title": "Center" },
                        { "title": "Call Executive" },
                        { "title": "Name" },
                        { "title": "Mobile" },
                        { "title": "Phone" },
                        { "title": "Status" },
                        { "title": "Appt Date" },
                        { "title": "Joined Date" },
                        { "title": "Remark" },
                        { "title": "Source" },
                        { "title": "Publisher" },
                        { "title": "css" },
                      ]
                      ,
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            var css = aData[aData.length - 1];
            if (css == "1") {
                $(nRow).addClass('gradeN');
            }
            else if(css == "2") {
                $(nRow).addClass('gradeC');
            }
            else{
                $(nRow).addClass('gradeM');
            }

        }