根据表格单元格的值设置 CSS 规则答案

【问题标题】：Set CSS rules depending the value of a table cell根据表格单元格的值设置 CSS 规则
【发布时间】：2016-10-03 05:49:21
【问题描述】：

如何将我的 CSS 规则应用于具有特定值的 <td>？

    <table>
      <tr>
        <td>Name</td>
        <td>John</td>
      <tr>
    </table>

例如，我如何将 td 中的color:black 设置为 John？只有CSS才有可能吗？怎么样？

【问题讨论】：

你可以设置一个类
不行，因为html是自动生成的，我无法添加属性。所以，我唯一可能的 td 选择器就是值。
@PieroAlberto JavaScript 将是这里的一个选项 - 你对 JS 解决方案持开放态度吗？
我更喜欢 CSS，但是，很明显，如果有必要的话，js 就更好了！ :)
不，你不能通过 CSS 做到这一点（尽管有一个候选者 here）。如果在生成标记时无法添加类，则需要通过 javascript 执行此操作。

标签： javascript jquery html css html-table

【解决方案1】：

1.HTML & CSS

<table>
  <tr>
    <td>Name</td>
    <td class="red-flag">John</td>
  <tr>
</table>

<style>
 .red-flag{
   color:red;
 }
</style>

2. 带有 jQuery 的选项：

 $("td:contains('John')").css('color', 'red');

【讨论】：

不行，因为html是自动生成的，我无法添加属性。所以，我唯一可能的 td 选择器就是值。
我刚刚编辑了我的答案——你可以用 jQuery 来做。如果您想根据元素的值将类分配给元素，您可以执行以下操作： $("td:contains('John')").addClass('red-flag');等

【解决方案2】：

这是一个 JS 解决方案，它遍历 td 的所有实例并检查它们的内容。在我的示例中，它将一个类附加到 td 的内部内容为“John”。

var el = document.getElementsByTagName("td");
for (var i = 0; i < el.length; i++) {
  if(el[i].innerHTML == "John") {
    el[i].className += " " + "test";
  }
}

.test {
  color: red;
}

<table>
  <tr>
    <td>Name</td>
    <td>John</td>
  <tr>
</table>

编辑 - 当然，上面是一个基本示例 - 您可以根据自己的需要进行扩展和定制。

【讨论】：

【解决方案3】：

我认为问题不在于如何设置类，而在于如何阅读/对某些元素内容做出反应。

理论上这在当前的 CSS 规范中是不可能的。不过也有例外：

:empty-pseudo-selector（只检测元素是否完全为空）
```
td:empty {
  background-color: lightgreen;
}
```

详细示例：http://codepen.io/MattDiMu/pen/pbJbOx

根据它以数据属性和后续样式编写内容。

HTML

    <td data-val="Name"></td>

CSS

    td::after {
      content: attr(data-val);
    }
    [data-val="John"] {
      background-color: lightgreen;
    }

详细示例：http://codepen.io/MattDiMu/pen/OXVXaO

虽然这是一个“黑客”，但应谨慎使用，因为

大多数屏幕阅读器不会看到/读取该值，因为它们会忽略 CSS 内容
您不能再在 ::after 伪元素中使用不同的内容
您不能使用它来显示 HTML 结构，只能显示文本

PS: 提到的 ":contains" 伪类已被删除，并且从未将其纳入推荐的 CSS 规范。 AFAIK，任何主流浏览器都不支持它。

【讨论】：