css - 在第一行有行跨度的情况下,在表格的第一行设置 css 样式
问题描述
我有很多表,想在第一行有行跨度的情况下在表的第一行设置 css 样式。
<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>
使用这种样式,我尝试更改第一行:
thead tr:first-child,
tbody tr:first-child {
background-color: #1DA6C0;color: #fff;
}
解决方案
您可以使用以下方法在 Javascript 后台设置它:
nth-child(-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';
}
推荐阅读
- c# - Excel:下载文件 LoadTestExcelAddIn.vsto 未成功
- c++ - 如何在 Code::blocks c++ 中使用 shell 命令?
- lldb - 使用 lldb 在主二进制文件中查找名为 '_OBJC_IVAR__$_DIRect._width' 的非外部符号?
- reactjs - 使用 React Router 处理多个路由
- openstack - 泊坞窗上的 OpenStack
- javascript - 比 `setTimeout` 和 `.length` 更好的检查元素是否存在的方法
- android - 在 Android 上访问 IP 子域
- sqoop - 如何将 Sqoop list-tables 命令的输出存储到文本文件?
- css - CSS repeat-x 但只是我想要的图像中的一部分
- java - 为什么编译器不会产生重复的错误?