ng2-table 如何向特定行添加样式

Question

嗨，我是 angular 的新手 2. 我正在使用 ng2-table. I added to my website table like this。我需要为 table 内的特定行添加颜色。这怎么可能？我试图像 tutorial 对他的专栏所做的那样添加它，但没有成功。

Answer 1

检查他们提供的 style file 以了解 css-class 名称正在使用什么并尝试覆盖它们：

例如使用的 class 个：table dataTable table-striped table-bordered

CSS:

table.dataTable tbody th, table.dataTable tbody td {
  padding: 8px 10px;
  background-color: red;
}

结果：

Answer 2

找到答案，取自此处： https://github.com/valor-software/ng2-table/issues/342

我们可以通过添加一些样式来更改行的颜色，如下所示：

一个快速而肮脏的解决方案：

第 1 步：整合 jQuery

第 2 步：为您的结果 table 提供一个 ID，例如：

<ng-table id="resultDataTable" ...

第 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');
});}

ng2-table 如何向特定行添加样式

ng2-table how to add style to specific row

html

css

typescript

ng2-bootstrap

angular