如何在具有特定值的<td>
上应用我的CSS规则?
<table>
<tr>
<td>Name</td>
<td>John</td>
<tr>
</table>
例如,如何使用值John设置 td 中的color:black
?是否只能使用CSS?怎么样?
答案 0 :(得分:1)
这是一个JS解决方案,它循环遍历td
的所有实例并检查其内容。它将一个类附加到td,其内部内容为&#34; John&#34;在我的例子中。
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;
编辑 - 以上是一个基本的例子 - 您可以扩展和定制您的需求。
答案 1 :(得分:1)
我认为问题不是关于如何设置类,而是如何读取/响应某些元素内容。
理论上,这在当前的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
这是一个&#34; hack&#34;但是应该谨慎使用,因为
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');