html - HTML 表格的条件格式

Question

我有一个 HTML 表格

<table border="1">
  <tr bgcolor="#6699FF">
    <th>Name</th>
    <th>DOJ</th>
    <th>BAU</th>
  </tr>
  <tr>
    <td>XXX</td>
    <<td>2015-06-03</td>
      <td>1</td>
  </tr>
  <tr>
    <td>YYY</td>
    <<td>2015-05-03</td>
      <td>2</td>
  </tr>
  <tr>
    <td>ZZZ</td>
    <<td>2015-04-03</td>
      <td>3</td>
  </tr>
</table>

` 我的要求是，如果 BAU(第 3 列)为 1，则相应的 DOJ(第 2 列)单元格将为绿色，依此类推。我在 Linux 中生成此报告。有没有办法只使用 CSS 和 HTML 来做到这一点。如果不是另一种方式是什么？提前致谢!

Answer 1

只有一种方法。

您可以使用data-* 属性。

像这样:

<!-- ... -->

<tr bgcolor="#6699FF">
    <th>Name</th>
    <th>DOJ</th>
    <th>BAU</th>
</tr>
<tr data-bau="1">
    <td>XXX</td>
    <td>2015-06-03</td>
    <td>1</td>
</tr>

<!-- ... -->

然后，在你的 CSS 上:

table tr[data-bau="1"] td:first-child + td {background:lightgreen;}
table tr[data-bau="2"] td:first-child + td {background:lightblue;}
table tr[data-bau="3"] td:first-child + td {background:lightyellow;}
/* ... */

---

例子:

table tr[data-bau="1"] td:first-child + td {background:lightgreen;}
table tr[data-bau="2"] td:first-child + td {background:lightblue;}
table tr[data-bau="3"] td:first-child + td {background:lightyellow;}

<table border="1">
	<tr bgcolor="#6699FF">
		<th>Name</th>
		<th>DOJ</th>
		<th>BAU</th>
	</tr>
	<tr data-bau="1">
		<td>XXX</td>
		<td>2015-06-03</td>
		<td>1</td>
	</tr>
	<tr data-bau="2">
		<td>YYY</td>
		<td>2015-05-03</td>
		<td>2</td>
	</tr>
	<tr data-bau="3">
		<td>ZZZ</td>
		<td>2015-04-03</td>
		<td>3</td>
	</tr>
</table>

---

如果这不是一个选项，您可以在生成 HTML 时使用 style 属性:

<table border="1">
	<tr bgcolor="#6699FF">
		<th>Name</th>
		<th>DOJ</th>
		<th>BAU</th>
	</tr>
	<tr>
		<td>XXX</td>
		<td style="background: lightgreen;">2015-06-03</td>
		<td>1</td>
	</tr>
	<tr>
		<td>YYY</td>
		<td style="background: lightblue;">2015-05-03</td>
		<td>2</td>
	</tr>
	<tr>
		<td>ZZZ</td>
		<td style="background: lightyellow;">2015-04-03</td>
		<td>3</td>
	</tr>
</table>