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

时间:2016-06-03 08:35:38

标签: javascript jquery html css html-table

如何在具有特定值的<td>上应用我的CSS规则?

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

例如,如何使用值John设置 td 中的color:black?是否只能使用CSS?怎么样?

3 个答案:

答案 0 :(得分:1)

这是一个JS解决方案,它循环遍历td的所有实例并检查其内容。它将一个类附加到td,其内部内容为&#34; John&#34;在我的例子中。

&#13;
&#13;
var el = document.getElementsByTagName("td");
for (var i = 0; i < el.length; i++) {
  if(el[i].innerHTML == "John") {
    el[i].className += " " + "test";
  }
}
&#13;
.test {
  color: red;
}
&#13;
<table>
  <tr>
    <td>Name</td>
    <td>John</td>
  <tr>
</table>
&#13;
&#13;
&#13;

编辑 - 以上是一个基本的例子 - 您可以扩展和定制您的需求。

答案 1 :(得分:1)

我认为问题不是关于如何设置类,而是如何读取/响应某些元素内容。

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

  1. :empty-pseudo-selector(仅检测元素是否为完全空)

    td:empty {
      background-color: lightgreen;
    }
    
  2. 详细示例:http://codepen.io/MattDiMu/pen/pbJbOx

    1. 根据数据属性和后续样式编写内容。
    2. 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

      这是一个&#34; hack&#34;但是应该谨慎使用,因为

      • 大多数屏幕阅读器无法查看/阅读该值,因为它们忽略了CSS内容
      • 您可能不再在:: after伪元素
      • 中使用其他内容
      • 您不能将其用于显示HTML结构,仅用于文本

      PS:提到的&#34;:包含&#34;伪类被删除,从未成为推荐的CSS规范。 AFAIK,在任何主流浏览器中都不支持。

答案 2 :(得分:0)

1.HTML&amp; 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');