HTML表格的条件格式答案

【问题标题】：conditional formatting on HTML tableHTML表格的条件格式
【发布时间】：2015-06-07 10:54:16
【问题描述】：

我有一个 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 来做到这一点。如果不是，其他方式是什么？提前致谢！

【问题讨论】：

您可以在服务器端生成您想要的内容，也可以使用 JavaScript。 HTML 或 CSS 中都没有条件句
这只是我在 LINUX 中使用 BTEQ 从数据库中获取数据并将它们转换为 HTML 表的一些报告，我想按上述方式对其进行格式化。如果我们可以使用Java脚本，该怎么做？？

标签： html css

【解决方案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>

【讨论】：

感谢您的帮助！但我们无法预测 bau 值，它可能是任何东西。在那种情况下，有没有像获取参数并将其传递给 data-bau 之类的东西？？
@Hasain 您可以在data-bau 中输入任何值，只要您在CSS 中输入相同的值即可。但是，要设置颜色，您必须知道什么 BAU 会有什么颜色。获得该列表后，您可以轻松构建 CSS。其他选择，包括发送已经在td 中的背景颜色或添加一堆具有 BAU 值的类（也需要知道值范围）。
再次感谢伊斯梅尔。我想说的是，这个 HTML 将由自动 shell 脚本生成，同样会发送给我，我想在自己发送邮件之前进行这种格式化
@Hasain 如果您要通过电子邮件发送，最好的选择和希望是内联样式。 如果您真的很幸运，您的样式可能不会被删除。大多数电子邮件客户端会删除所有<style> 标签。您唯一的选择是REALLY 内联样式（使用属性style）。
感谢您的帮助。由于我是网页开发的新手，您介意提供代码 sn-p 吗？？

【解决方案2】：

不，不是。

CSS 或 HTML 都没有提供任何基于文本节点值的格式化方法。

您需要一种编程语言来执行此操作。您可能应该使用编写 Linux 应用程序时使用的任何编程语言，并将其添加为该应用程序的功能。

【讨论】：

这只是我在 LINUX 中使用 BTEQ 从数据库中获取数据并将它们转换为 HTML 表的一些报告，我想按上述方式对其进行格式化。如果我们可以使用Java脚本，该怎么做？？