javascript - 隐藏列时调整第 nth-child 属性

Question

我们使用 jQuery DataTables 来显示一些表格数据。我们还动态地使用“显示/隐藏列”选项 ( https://datatables.net/examples/api/show_hide.html )

问题是我们正在使用 CSS nth-child 逻辑来对齐/格式化某些列，但是当我们使用 jQuery 隐藏列时，所有 nth-child逻辑现在被隐藏的列关闭。

请see this jsFiddle用于演示问题。

有没有办法调整所有 nth-child css 值？

Answer 1

SOLUTION

避免在这种情况下使用 nth-child。而是将类名分配给带有 columns.className 的列并改为使用类名定位特定列。

JavaScript

var table = $('#example').DataTable( {
    "columnDefs": [{
        "targets": 3,
        "className": "col-age"
    }]
} );

CSS

#example td.col-age {
  text-align:right;
}

DEMO

参见 updated jsFiddle用于代码和演示。