javascript - 如何使用数据表动态更改行的字体大小？

Question

我检查了数据表api但在 row() 函数下看不到任何内容。基本上我想实现这种功能:

var myTable = $('#example').DataTable();
myTable.row(i).fontSize = dynamicValue;

或者

myTable.row(i).css('font-size', dynamicValue);

Answer 1

如果您想要持久的解决方案，您必须通过API。如果您有一个 dataTable 实例:

var table = $('#example').DataTable()  

和一个 CSS 类:

.larger-font {
  font-size: 120%;
}

那么您可以永久更改 font-size单击的行:

$('#example').on('click', 'tr', function() {
  table.row(this).nodes().to$().addClass('larger-font')
})    

row(this)为您提供内部行实例
nodes()为您提供整个<tr> DOM 节点
to$()返回该 DOM 节点作为 jQuery 实例
addClass()添加 CSS

演示 -> http://jsfiddle.net/tgefobbq/

如果你想操作内联 CSS 而不是注入(inject)类，你只需以同样的方式执行此操作:

table.row(this).nodes().to$().css('font-size', '120%')

to$()不是必需的，只是方便 - 您也可以定位“原始”DOM:

table.row(this).nodes()[0].style.cssText = 'font-size:120%;

但无论哪种方式，重要的是通过 API 检索 DOM 节点，而不是通过 jQuery 或任何其他方式。