Javascript DataTables：如何将类设置为表行单元格（而不是表头单元格！）

我的桌子有很好的款式

{抱歉，链接不再工作}

我必须添加sClass，以便新行（由fnAddData添加）获得正确的类

不幸的是，这破坏了我的布局，因为这些类也被添加到了我的表头单元格中

{抱歉，链接不再工作}

如何将sClass配置为仅适用于TBODY单元格

澄清：

  var rolesTable = $('#roles').dataTable({
      "aoColumns": [
        { "mDataProp": "id", "sClass": "avo-lime-h avo-heading-white" },
        { "mDataProp": "name", "sClass": "avo-light" },
        { "mDataProp": "module", "sClass": "avo-light" },
        { "mDataProp": "description", "sClass": "avo-light" },
        { "mDataProp": null, "bSearchable": false, "bSortable": false, 
          "sDefaultContent": '<button type="button" name="add" class="btn"><i class="icon-plus icon-white"></i></button>' }, 
      ],
  }); // end od dataTable

然后，添加的行如下所示：

<tr>
    <td class="avo-lime-h avo-heading-white">10</td>
    <td class="avo-light">testname</td>
    <td class="avo-light">testmodule</td>
    <td class="avo-light">testdescription</td>
    <td></td>
</tr>

10
测试名
测试模块
测试描述

这是非常好的

**问题在于**此设置还将这些类添加到：

<thead>
    <tr> (...) </tr>
</thead>

(...) 

---

表头单元格。。。我不想看到的是：

我的问题的解决方案是：使用fnRowCallback而不是sClass将类设置为新行

  var rolesTable = $('#roles').dataTable({
      "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "name" },
        { "mDataProp": "module" },
        { "mDataProp": "description" },
        { "mDataProp": null, "bSearchable": false, "bSortable": false, 
          "sDefaultContent": '<button type="button" name="add" class="btn btn-round"><i class="icon-plus icon-white"></i></button>' }, 
      ],
      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
          $('td:eq(0)', nRow).addClass( "avo-lime-h avo-heading-white" );
          $('td:eq(1),td:eq(2),td:eq(3)', nRow).addClass( "avo-light" );
        }
  }); // end od dataTable

var rolesTable=$（“#角色”）.dataTable({
“aoColumns”：[
{“mDataProp”：“id”}，
{“mDataProp”：“name”}，
{“mDataProp”：“模块”}，
{“mDataProp”：“description”}，
{“mDataProp”：null，“bsearcable”：false，“bSortable”：false，
“sDefaultContent”：“”}，
],
“fnRowCallback”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
$（'td:eq（0）”，nRow.addClass（“avo-lime-h avo标题白色”）；
$（'td:eq（1），td:eq（2），td:eq（3）”，nRow.addClass（“avo灯光”）；
}
}); // 结束od数据表

在之前设置默认类

$.fn.dataTableExt.oStdClasses.sStripeOdd = '';

$.fn.dataTableExt.oStdClasses.sStripeEven = '';

更多参考请参见此处

---

由于您仅使用sClass将样式应用于表，因此问题的简单解决方案是修改CSS本身，使其仅应用于td元素

旧CSS样式：

.avo-light {
    color: blue;
}

td.avo-light {
    color: blue;
}

新CSS样式：

.avo-light {
    color: blue;
}

td.avo-light {
    color: blue;
}

这样，CSS将只影响您感兴趣应用样式的单元格，尽管sClass也应用于th元素

我意识到这个问题有点陈旧，但我发现它比最好的解决方案更模块化

  let table = $("#myTable").dataTable();
  table.rows().every(function(rowIdx, tableLoop, rowLoop){
    $(this.node().cells[0]).addClass('red');
    $(this.node().cells[1]).addClass('blue');
  }

---

呈现表后，使用每行的JavaScript选择器遍历所有行，并进行任何更改。这解决了gamliela在loostr的回答中提出的性能问题

请张贴与问题相关的代码。理想情况下，除了问题正文中的代码之外，请添加问题的示例。这将帮助我们帮助你。我不知道我可以标记“接受”而不投票回答。。。直到最近，我的分数还太低，无法升级此代码的问题在于，您在表格的每一张图上都尝试添加类。在某些情况下，这可能会导致性能问题。更好的解决方案是在表init之后和动态添加数据之后添加类。查看讨论的主题。为我工作。我是通过Ajax加载数据的，所以必须用initComplete来包装它-