[英]ng2-table how to add style to specific row
Hi I'm new with angular 2. I'm using ng2-table . 嗨,我是角度2的新手 。我正在使用ng2-table 。 I added to my website table like this .
我说喜欢我的网站目录此 。 I need to add a color to specific row inside the table.
我需要为表格内的特定行添加颜色。 How is that possible ?
怎么可能? I tried to add it like the tutorial did with his columns but without success.
我尝试添加它,就像教程用他的专栏做的那样但没有成功。
Check their style file provided to know what css-class Names are using and try to override them: 检查他们提供的样式文件 ,以了解正在使用的css类名称并尝试覆盖它们:
Eg of classes used: table
dataTable
table-striped
table-bordered
例如,使用的类:
table
dataTable
table-striped
table-bordered
CSS : CSS :
table.dataTable tbody th, table.dataTable tbody td {
padding: 8px 10px;
background-color: red;
}
Found an answer, taken from here: https://github.com/valor-software/ng2-table/issues/342 找到答案,取自这里: https : //github.com/valor-software/ng2-table/issues/342
We can change te color of the row by adding some style to it like this: 我们可以通过添加一些样式来改变行的颜色,如下所示:
A quick and dirty solution: 快速而肮脏的解决方案:
Step 1: Integrate jQuery 第1步:集成jQuery
Step 2: Give your result table an ID like: 第2步:为结果表提供如下ID:
<ng-table id="resultDataTable" ...
Step 3: Modify your onCellClick method: 第3步:修改onCellClick方法:
onCellClick(data: any): any {
/* get index of row */
let index = this.tableData.indexOf(data.row);
/* add an class 'active' on click */
$('#resultDataTable').on('click', 'tr', function (event: any) {
//noinspection TypeScriptUnresolvedFunction
$(this).addClass('active').siblings().removeClass('active');
});}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.