datatable css not work

样式不显示问题 无论是放内联样式文件还是直接放HTML文件都不显示

后来发现是因为datatable是放在后面初始化，它自带的样式覆盖了我们自定义的样式

所以要注意写code时，很多时候不是code不起作用，而是后面的code覆盖了前面的code

 

由于一直想改变table的背景颜色，但是第一列的颜色总是被覆盖，找了很久也没找到是哪里覆盖了

我的code是创建全部数据后会收集‘分类’那一列的数据进下拉框中让使用者进行选择

        "initComplete": function () {
            console.log( '表格初始化完成 initComplete' );       // DEBUG
            this.api().columns(4).every( function () {
                var classify_col = this;        // 每一行的第4列元素
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(classify_col.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        classify_col
                            // 搜索条件
                            .search( val ? '^'+val+'$' : '', true, false )
                            // 开始加载
                            .draw();
                    } );
                // 遍历第三列每一个元素 不重复排序添加到option中
                classify_col.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },
        // 每一行创建完调用的函数
        "createdRow": function (row, data, dataIndex) {
            // console.log( '一行 createdRow:'+dataIndex ); // DEBUG
            // row : tr dom
            // data: row data
            // dataIndex:row data's index
            $(row).addClass(data.类名);
            
            if(data.类名=="official"){
                $(row).css("background-color","rgb(250, 236, 236)");
            }
            else if(data.类名=="music_stage"){
                $(row).css("background-color","rgb(217, 251, 255)");
            }
            else if(data.类名=="Radio"){
                $(row).css("background-color","rgb(255, 250, 200)");
            }
            else if(data.类名=="group_arts"){
                $(row).css("background-color","rgb(201, 245, 255)");
            }
            else if(data.类名=="tv_station"){
                $(row).css("background-color","aliceblue");
            }
            else if(data.类名=="news"){
                $(row).css("background-color","#cdcfff");
            }
            else if(data.类名=="pub_performance"){
                $(row).css("background-color","#FFCC99");
            }
            else if(data.类名=="pub_performance"){
                $(row).css("background-color","#FFCC99");
            }
            else if(data.类名=="magazine"||data.类名=="cf"){
                $(row).css("background-color","#ffff9c");
            }
            else if(data.类名=="VLOG"){
                $(row).css("background-color","#d4fab4");
            }
            else if(data.类名=="concert"||data.类名=="FM"){
                $(row).css("background-color","#bbedff");
            }
            else if(data.类名=="live"){
                $(row).css("background-color","#ffe3c4");
            }
            else if(data.类名=="teleplay"){
                $(row).css("background-color","#ffcefa");
            }
            else if(data.类名=="other"){
                $(row).css("background-color","#ebd7f4");
            }
        }

即先每一行执行 “createdRow” 全部行执行完之后执行 “initComplete”

在createdRow中我根据数据的不同对每一行的背景颜色进行了设置，但是最后排列出来第一列还是datatable默认的背景颜色，如果在第4列的下拉框中选择了分类排序呈现之后第三列的数据也是datatable默认的背景颜色。

所以我怀疑是每次datatable执行了api之后都会重新带去它默认的样式

于是我去控制台“Elements”->"Styles"中找到默认的样式

 

 

 

(应该是没有删除线的，这是我修改后起作用的图片，我懒得再截了)

之后在css文件中将奇偶行的背景颜色都设为透明:

table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
    background-color:transparent;
}
table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
    background-color: transparent;
}

这样datatable默认的样式就不再起作用了，需求实现