这是我的表的一部分(具有在生成表之前不知道的许多行),该表由外部脚本创建:
<table id='testTable'><thead>
<tr>
<th align="center">Header 1</th>
<th align="center">Header 2</th>
<th align="center">Header 3</th>
<th align="center">Header 4</th>
<th align="center">Header 5</th>
<th align="center">Header 6</th>
<th align="center">Header 7</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">AAAA</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">AAAA</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">BBBB</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">BBBB</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">CCCC</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
我想使用2种颜色(例如,灰色和白色)更改交替行的背景颜色,并将第一种的值作为键。在上面的数据中,它将类似于:
1st row --> white
2nd row --> grey
3rd row --> grey (because the key is still "BBBB")
4th row --> white
我检查了another example,但我无法使用它,因此最好能有逐步说明来编辑用于设置表格样式的html或CSS(如有必要,我也可以发布CSS的内容。
答案 0 :(得分:0)
如果可以调整HTML,这是仅CSS解决方案的想法:
tbody tr td:first-child::before {
content:var(--t);
}
tbody tr[style*='AAAA'] {
background:red;
}
tbody tr[style*='BBBB'] {
background:blue;
}
tbody tr[style*='CCCC'] {
background:yellow;
}
<table id='testTable'>
<thead>
<tr>
<th align="center">Header 1</th>
<th align="center">Header 2</th>
<th align="center">Header 3</th>
<th align="center">Header 4</th>
<th align="center">Header 5</th>
<th align="center">Header 6</th>
<th align="center">Header 7</th>
</tr>
</thead>
<tbody>
<tr style="--t:'AAAA'">
<td align="center"></td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr style="--t:'AAAA'">
<td align="center"></td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr style="--t:'BBBB'">
<td align="center"></td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr style="--t:'BBBB'">
<td align="center"></td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr style="--t:'CCCC'">
<td align="center"></td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>