如何在DataTable添加行时为<td>标签添加指定类名

你的问题 #

你现在用DataTable的row.add()动态插入行，但生成的<td>没有你需要的vocuherrow类——之前试了addClass()，结果类名跑到<tr>上了，你希望在添加行的同时就给每个加上目标类，不用事后再单独操作。

两种直接解决的办法 #

方法1：手动写带类的标签（最直接）

既然row.add()接受HTML字符串组成的数组，那咱们直接把每个列的内容包裹在带vocuherrow类的<td>里就行，代码改成这样：

var dtVouchers = $('#tblVouchers').DataTable(); 
dtVouchers.row.add([ 
  '<td class="vocuherrow"><span>'+text+'</span></td>', 
  '<td class="vocuherrow"><span>'+data._voucherCode+'</span></td>', 
  // 其他列照着这个格式写
]).draw( true );

这样生成的每个<td>都会自带vocuherrow，DataTable自己的排序类（比如sorting_1）也会正常加上，完全符合你想要的结果。

方法2：用DataTable的createdCell全局配置（更优雅）

如果希望所有行（包括初始化时的静态行和后来动态加的行）的<td>都自动带这个类，那在初始化DataTable的时候配置createdCell更省心：

var dtVouchers = $('#tblVouchers').DataTable({
  columns: [
    { 
      // 这里对应你的列字段，比如状态列
      createdCell: function (td, cellData, rowData, rowIndex, colIndex) {
        $(td).addClass('vocuherrow');
      }
    },
    { 
      // 优惠券码列同理
      createdCell: function (td, cellData, rowData, rowIndex, colIndex) {
        $(td).addClass('vocuherrow');
      }
    },
    // 其他列都加上这个配置
  ]
});

// 之后加行的时候直接传数据就行，不用写<td>标签
dtVouchers.row.add({
  status: '<span>'+text+'</span>',
  voucherCode: '<span>'+data._voucherCode+'</span>'
}).draw(true);

这个方法一劳永逸，所有<td>在创建时都会自动加上类名，不用每次加行都重复写HTML。

补充：为啥之前的addClass()不行？ #

因为row.add()返回的是行对象，调用addClass()自然会把类加到<tr>上。如果非要用这种方式，也可以加完行后链式修改，但这属于事后操作，不符合你“添加时完成”的需求：

dtVouchers.row.add([...]).draw(true).nodes().to$().find('td').addClass('vocuherrow');

内容的提问来源于stack exchange，提问作者boss