根据第一列的值更改HTML表中的行背景

时间:2018-07-19 11:48:29

标签: html css html-table background-color

这是我的表的一部分(具有在生成表之前不知道的许多行),该表由外部脚本创建:

<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的内容。

1 个答案:

答案 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>