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

【问题标题】：Adding a classname to td (column) of the datatable将类名添加到数据表的 td（列）
【发布时间】：2019-09-27 02:19:18
【问题描述】：

我想在表中的<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”作为类名添加到我的每一列？

编辑：我更喜欢 add 类，而我正在添加行.. 不是单独的。

【问题讨论】：

标签： javascript datatables classname

【解决方案1】：

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

或者您可以在 tr 上离开课程“vocuherrow”，然后使用

tr.vocuherrow  td

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

【讨论】：

在我创建行时不能这样做吗？
如果 DataTable 插件提供了这样的 on 选项 .. 否则你总是可以在插件初始化后使用它。没用过这个插件，所以我不能告诉你它的选项
感谢您的回复。我找到了 addClass 方法，但它适用于完整的行而不是行的子项（列）
好吧，那么你已经回答了你自己的问题
也许还有另一种方法：)

【解决方案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>

【讨论】：

我收到以下错误：DataTables 警告：table id=tblVouchers - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅datatables.net/tn/3
你应该在var dtVouchers分配中使用上面的代码而不是你的$('#tblVouchers').DataTable()
感谢您的回复，抱歉回复晚了。好吧，我从您的代码中复制并粘贴了但不起作用。我得到了同样的错误！ @U25lYWt5IEJhc3RhcmQg
这个错误基本上意味着你试图在你的代码中多次执行$('#tblVouchers').DataTable(...)，所以，请确保你不要。
@ertan2002 ：请注意我在答案中附加的示例，我在其中通过类名应用自定义 CSS 并在操作中使用该代码。