Question

我想向我的表中的<td>标签添加一个类。这是我的代码

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”，但是它将类添加到我的<tr>（行）而不是<td>（列）

所以，我的问题是如何在每列中添加“ vocuherrow ”作为类名？

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

Answer 1

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

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

以下演示说明了概念：

//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>

Answer 2

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

或者您可以在tr和使用

tr.vocuherrow  td

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

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

2 个答案: