javascript DataTables：将类添加到表格单元格，而不是表格标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26810368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables: Add class to table cells, but not table headers?
提问by eclipsis
I'm using the following code to initialize jQuery DataTables:
我正在使用以下代码来初始化 jQuery DataTables：
var oTable = $('#qpidvulh_to-do_list').dataTable( {
"columns": [
{
"data": "item",
"className": "editable"
}
]
} )
The issue with this code is that it adds the editableclass to the thof each column, even though I only want it added to the tdof each column.
这段代码的问题在于它将editable类添加到th每列的 ，即使我只想将它添加到td每列的 。
How can I get the code to only add the editableclass to the cells of each column and not their headers?
我怎样才能让代码只将editable类添加到每列的单元格而不是它们的标题？
回答by eclipsis
Thanks to mainguy and markpsmith for posting their answers. I'll throw my own solution into the mix, but I'd still like to see what everyone thinks the best performing solution would be:
感谢 mainguy 和 markpsmith 发布他们的答案。我将把我自己的解决方案投入到混合中，但我仍然想看看每个人都认为性能最好的解决方案是什么：
$('#qpidvulh_to-do_list thead th').removeClass('editable');
$('#qpidvulh_to-do_list thead th').removeClass('editable');
回答by mainguy
Why not simply use jquery?
为什么不简单地使用jquery？
$("td").addClass('editable');
Look here
看这里
Update: On second thought: It would be better to put this jquery snippet in the draw eventof dataTables so it works too when pagination changes and the table is redrawn.
更新：再想一想：最好将此 jquery 片段放在draw eventdataTables 中，以便在分页更改和表重绘时也能正常工作。
回答by markpsmith
You can use fnRowCallbackfor this:
您可以为此使用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');
});
}
回答by moledet
"aoColumns":[null,{sClass:'editable'},null,null,{ "sClass": 'my_class other_class' }]
回答by mikias
In my table I put the editable in the draw callback like this:
在我的表中，我将可编辑项放入绘制回调中，如下所示：
$('#table td.editable-class').editable();
and in the column defs I gave the editable cells a class. Here's an example:
在 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();
}
});
Hope that helps.
希望有帮助。
回答by mark_b
I had this problem but the suggested solution didn't really work for me because I am applying different types of inputs (number, text) selectively to cells in multiple tables. I have an onclick event for the cell to convert it into an editable box. I changed where it is called from
我遇到了这个问题，但建议的解决方案并不适合我，因为我将不同类型的输入（数字、文本）有选择地应用于多个表中的单元格。我有一个用于将单元格转换为可编辑框的 onclick 事件。我改变了它的调用位置
table.on('click', '.edit-text', function() {
// yadda yadda;
}
to
到
table.on('click', 'td.edit-text', function() {
// yadda yadda;
}
In this way the function ignores the 'th' cells with that class.
通过这种方式，该函数会忽略该类的“第”个单元格。
回答by César León
The best way will be using CSS.
最好的方法是使用 CSS。
Just set the CSS class selector to affect the 'td' and not the 'th'.
只需将 CSS 类选择器设置为影响 'td' 而不是 'th'。
Try this code:
试试这个代码：
td.editable {
color: red; /*Or some other attribute*/
}
Important: With this solution the 'th' element will still have the 'editable' class set, but it wont be affected by the CSS styling.
重要提示：使用此解决方案，'th' 元素仍将具有 'editable' 类集，但不会受到 CSS 样式的影响。
If you still need to remove the class on the 'th' element try this:
如果您仍然需要删除 'th' 元素上的类，请尝试以下操作：
$('#qpidvulh_to-do_list th').removeClass('editable');
/* ADDITIONAL INFO */
/ * 附加信息 */
If you need more info about CSS selectors, try this page: https://www.w3schools.com/cssref/css_selectors.asp
如果您需要有关 CSS 选择器的更多信息，请尝试此页面：https: //www.w3schools.com/cssref/css_selectors.asp
回答by Manisha
Use this to add the class to the cell, 100% working solution, make sure the you give the correct target number while adding the class, here createdCellfunction adds class to the targeted cell,
使用此将类添加到单元格，100% 工作解决方案，确保在添加类时提供正确的目标编号，这里createdCell函数将类添加到目标单元格，
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
}
}]
});
