无法获得第二个数据表自己的 css答案

【问题标题】：cant get 2nd datatable its own css无法获得第二个数据表自己的 css
【发布时间】：2013-09-20 13:54:28
【问题描述】：

一旦我添加了 { sClass: "myCustomClass" }，我正试图让我的第二个数据表使用它自己的 css（用于交替行颜色），我的 jquery 不再触发。

demo_table.css 的 CSS

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DataTables row classes
*/
table.display tr.odd.gradeA {
background-color: #ddffdd;
}

table.display tr.even.gradeA {
background-color: #eeffee;
}

table.display tr.odd.gradeC {
background-color: #ddddff; 
}

table.display tr.even.gradeC {
background-color: #eeeeff;
}

table.display tr.odd.gradeX {
background-color: #ffdddd;
}

table.display tr.even.gradeX {
background-color: #ffeeee;
}

table.display tr.odd.gradeU {
background-color: #ddd;
}

table.display tr.even.gradeU {
background-color: #eee;
}


tr.odd {
background-color: #E2E4FF;
}

tr.even {
background-color: white;
}

table.display tr.even.myCustomClass { background-color: #FFFFCC; }
table.display tr.odd.myCustomClass { background-color: #ffeeee; }

我用来初始化数据表的 Jquery，在添加 sclass 之前运行良好，但没有我添加的任何 css。

    function nestedtable(systemid) {
    var dbselected = $('#dblist').find(":selected").text();

    $('#nested_id').dataTable({
        "sAjaxSource": '/php/connect/nestedsearchtablequery.php',
        "bProcessing": true,
        "bDeferRender": true,
        "bDestroy": true,
        "sAjaxDataProp": "",
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "db", "value": dbselected}),
            aoData.push({ "name": "systemid", "value": systemid });
        },
        "aoColumns": [
            {  sClass: "myCustomClass" }, 
            { "mData": "eventtime" },
            { "mData": "eventtype" },
            { "mData": "cid_name" },
            { "mData": "cid_num" },
            { "mData": "cid_ani" },
            { "mData": "cid_dnid" },
            { "mData": "exten" },
            { "mData": "context" },
            { "mData": "appname" },
            { "mData": "channame" }, ]
        //"bJQueryUI": true  //This is commented out to remove the smooth datatable style
    });
}

我有两个表#table_id 和#nested_id，我正在尝试更改#nested_id 上的行颜色。

这是 #nested_id 的 jquery

 function fnFormatDetails(oTable, nTr, systemid) {

    var sOut =
'<div class="innerDetails">' +
  '<table id="nested_id" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px; background:white;">' +
    '<thead>'
                 + '<tr>'
                     + '<th>Time</th>'
                     + '<th>Event</th>'
                     + '<th>CNAM</th>'
                     + '<th>CNUM</th>'
                     + '<th>ANI</th>'
                     + '<th>DID</th>'
                     + '<th>Exten</th>'
                     + '<th>Context</th>'
                     + '<th>AppName</th>'
                     + '<th>Channel</th>'
                 + '</tr>'
             + '</thead>'
             + '<tbody></tbody>'
    '</table>' +
'</div>';
    return sOut;
}

这是#table_id 的html

    <body>
    <div id="stable" style=" margin-left: 2%; margin-right: 2%; display: none">
        <table class="display" id="table_id">
             <thead>
                 <tr>
                     <th>Call Date</th>
                     <th>Recording</th>
                     <th>System</th>
                     <th>CallerID</th>
                     <th>App</th>
                     <th>Destination</th>
                     <th>Disposition</th>
                     <th>Duration</th>          
                 </tr>
             </thead>
             <tbody></tbody>    
        </table>
    </div>           
</body>

【问题讨论】：

标签： javascript jquery html datatables

【解决方案1】：

我认为问题在于您的 CSS...sClass 将类放在列中的每个 td 上，而不是 tr。所以tr.even.myCustomClass 永远不会被应用。

应该更像：

table.display tr.even td.myCustomClass { background-color: #FFFFCC; }
table.display tr.odd td.myCustomClass { background-color: #ffeeee; }

编辑基于对 OP 的更新

您可以避免一起使用 sClass，而只使用特定于嵌套表的 CSS：

您的 html 中的表格缺少 class="display"。所以你可以添加，你的 CSS 是：

table.display#nested_id tr.even { background-color: #FFFFCC; }
table.display#nested_id tr.odd { background-color: #ffeeee; }

或者你可以把它关掉，你的 CSS 是：

table#nested_id tr.even { background-color: #FFFFCC; }
table#nested_id tr.odd { background-color: #ffeeee; }

最后，您需要为

添加 CSS

table#nested_id tr.even .sorting_1{ /*background-color here*/ }
table#nested_id tr.odd .sorting_1{ /*background-color here*/ }

有关工作示例，请参阅此 jsfiddle。

【讨论】：

那我有什么办法可以只做一个行颜色呢？并且通过改变颜色不会被应用。
即使添加后颜色也不会改变。嗯，我很困惑哈哈。
您能否将 HTML 代码（即使没有数据）添加到您要设置样式的帖子中？这将极大地帮助我们了解我们正在设计的 HTML 的结构。
即使在修复 css 并添加与 jsfiidle 上的显示类镜像的显示类之后，也必须覆盖它，因为颜色仍然与默认值相同。
如果您需要我可以提供一个您可以使用帐户查看的网站。