在第一行具有rowspan的情况下，在表的第一行上设置css样式 [英] Set css style on first row of the table on case first row has rowspan

问题描述

我有很多表，要在第一行具有rowspan的情况下在表的第一行设置css样式.

I have many table, want to set css style on first row of the table on case first row has rowspan.

<table>
<tbody>
<tr>
<td rowspan="2" width="110">Name</td>
<td width="110">Size</td>
<td width="110">Status</td>
</tr>
<tr>
<td>Meter</td>
<td>true/false</td>
</tr>
<tr>
<td>Code A</td>
<td>1</td>
<td>false</td>
</tr>
</tbody>
</table>

使用这种样式，我试图更改第一行:

With this style I tried to change first row:

thead tr:first-child,
tbody tr:first-child {
  background-color: #1DA6C0;color: #fff;
}

所以我在寻找css样式来更改表格，就像Image一样:

So I looking for a css style to change table just like Image:

推荐答案

您可以使用以下命令在Javascript后台进行设置:

You can set it in Javascript background using:

第n个孩子(-n + $ {rowspan})

例如.

let tr = document.getElementsByTagName("tr")[0];
let td = tr.getElementsByTagName("td")[0];
let rowspan = td.rowSpan? td.rowSpan:1; 
var nodes = document.querySelectorAll(`tbody tr:nth-child(-n+${rowspan})`);
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.background = '#1DA6C0';
}

https://jsfiddle.net/xugL8s9b/10/

这篇关于在第一行具有rowspan的情况下，在表的第一行上设置css样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！