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

Question

这是外部脚本创建的表的一部分（在生成表之前我不知道有多少行）：

<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

我检查了另一个示例，但无法使用它，因此最好有逐步指示来编辑用于设置表格样式的 html 或 CSS（如有必要，我可以发布CSS也是）。

标签： htmlcsshtml-tablebackground-color