DataTables：将类添加到表格单元格，但不是表格标题？

Question

我正在使用以下代码初始化jQuery DataTables：

var oTable = $('#qpidvulh_to-do_list').dataTable( {
    "columns": [
        {
            "data": "item",
            "className": "editable"
        }
    ]
} )

这段代码的问题在于它将editable类添加到每列的th中，即使我只想将它添加到每列的td中。

我怎样才能让代码只将editable类添加到每列的单元格而不是它们的标题？

Answer 1

感谢mainguy和markpsmith发布他们的答案。我会将自己的解决方案投入到混合中，但我仍然希望看到每个人都认为性能最佳的解决方案是：

$('#qpidvulh_to-do_list thead th').removeClass('editable');

Answer 2

为什么不简单地使用jquery？

$("td").addClass('editable');

看看here

更新：第二个想法：最好将这个jquery片段放在dataTables的draw event中，这样当分页更改并重新绘制表时它也会起作用。

Answer 3

您可以使用fnRowCallback：

var oTable = $('#qpidvulh_to-do_list').dataTable( {
    "columns": [
        {
            "data": "item"
        }
    ],
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $(nRow).children().each(function (index, td) {
            $(this).addClass('editable');
        });
     }

Answer 4

"aoColumns":[null,{sClass:'editable'},null,null,{ "sClass": 'my_class other_class' }]

Answer 5

在我的表中，我将editable放在draw回调中，如下所示：

$('#table td.editable-class').editable();

在列defs中，我给了可编辑单元格一个类。这是一个例子：

var table = $('#blocks').dataTable({
  ajax: {
    url: ...
  },
  columns: [
    { data: "column_data",    "name": "column1",   visible: false },
    { data: "editable_column", class: "editable another-class" }
   ],
  "drawCallback": function ( settings ) {

    $('#table td.editable').editable();
  }
});

希望有所帮助。

Answer 6

我有这个问题，但建议的解决方案并没有真正起作用，因为我选择性地将不同类型的输入（数字，文本）应用于多个表中的单元格。我有一个onclick事件，单元格将其转换为可编辑的框。我改变了调用的地方

table.on('click', '.edit-text', function() {
    // yadda yadda;
}

至

table.on('click', 'td.edit-text', function() {
    // yadda yadda;
}

这样，函数忽略了该类的'th'单元格。

Answer 7

最好的方法是使用CSS。

只需设置CSS类选择器以影响'td'而不是'th'。

试试这段代码：

td.editable {
    color: red; /*Or some other attribute*/
}

重要提示：使用此解决方案，'th'元素仍将具有'editable'类集，但它不会受CSS样式的影响。

如果您仍然需要删除'th'元素上的类，请尝试以下方法：

$('#qpidvulh_to-do_list th').removeClass('editable');

/* 附加信息 */

如果您需要有关CSS选择器的更多信息，请尝试以下页面：https://www.w3schools.com/cssref/css_selectors.asp