将类名添加到数据表的 td（列）

Question

我想在 table 中的 <td> 标签中添加 class。这是我的代码

var dtVouchers = $('#tblVouchers').DataTable();
 dtVouchers.row.add([
                     '<span>'+text+'</span>',
                       '<span>'+data._voucherCode+'</span>',
                         ....                         
                     ]).draw( true );

这是我的结果

<tr role="row" class="even">
    <td class="sorting_1"><span>Valid</span></td>
    <td><span>be6875f9-5af7-4</span></td>
</tr>

但我想要一些东西

<tr role="row" class="even">
    <td class="vocuherrow sorting_1"><span>Valid</span></td>    
    <td class="vocuherrow"> <span>dd4ce858</span></td>
</tr>

我试过 "addClass" 但它会将 class 添加到我的 <tr>（行）而不是 <td>（列）

所以，我的问题是如何将“vocuherrow”作为 class名称添加到我的每一列中？

编辑： 我更喜欢在添加行时添加 class.. 而不是单独添加。

Answer 1

$('#tblVouchers').find('td').addClass('vocuherrow');

或者您可以将 class 'vocuherrow' 留在 tr 和使用

tr.vocuherrow  td

或类似的 css 选择，我通常会更喜欢

Answer 2

您可以使用 columnDefs.className 选项，如下所示：

var dtVouchers = $('#tblVouchers').DataTable({
   columnDefs : [{
      targets: '_all',
      className: 'vocuherrow'
   }]
});

下面的 demo 说明了这个概念：

//src data
const srcData = [
  {voucher: 'dd4ce858', status: 'valid'},
  {voucher: 'dabce769', status: 'valid'},
  {voucher: '4bdacef5', status: 'valid'},
];

//datatables initialization
dtVouchers = $('#tblVouchers').DataTable({
  dom: 't',
    data: srcData,
    columns: ['voucher', 'status'].map(header => ({title: header, data: header})),
  columnDefs: [{
    targets: '_all',
    className: 'vocuherrow'
   }
  ]
});

tbody .vocuherrow {
  color: green;
}

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tblVouchers"></table>
</body>
</html>

将类名添加到数据表的 td（列）

Adding a classname to td (column) of the datatable

javascript

classname

datatables