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

使用此方法将类添加到单元格中，此方法是100％有效的解决方案，请确保在添加类时输入正确的目标编号，此处 createdCell 函数将类添加到目标单元格，< / p>

var oTable  = $('#<?php echo $module; ?>').DataTable({
                  columnDefs: [{"orderable": true, "targets": 1,
                        'createdCell':  function (td, cellData, rowData, row, col) {
                           $(td).addClass('myclass');
                           // $(td).parent('tr').attr('data-id', rowData[0]); // adds the data attribute to the parent this cell row
                        }
                  }]
    });

Answer 3

为什么不简单地使用jquery？

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

看here

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

Answer 4

您可以使用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 5

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

Answer 6

在我的表中，我将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 7

我遇到了这个问题，但是建议的解决方案对我而言实际上并不起作用，因为我将选择性地将不同类型的输入（数字，文本）应用于多个表中的单元格。我有一个onclick事件，该单元格将其转换为可编辑框。我改变了它的发源地

到

通过这种方式，该函数将忽略该类的第“ th”个单元格。

Answer 8

最好的方法是使用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

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

8 个答案: