我有一个.info
类的表,我想设置所有td
元素的背景色,只在列Amount
中,其中值为" "
。
设置颜色的部分是这样完成的
$(document).ready(colorMissingPayment);
function colorMissingPayment() {
$(".info td").each(function () {
var value = $(this).text();
if (value == " ") {
$(this).css("background-color", "red")
};
});
};
但是它针对表中的所有td
元素;如何定位特定列/th
?示例如下
<table class="info">
<tr>
<td>
<table>
<h4 align="center">2021</h4>
<tr>
<th>Amount</th>
<th style="width:500px">Notes</th>
</tr>
<tr>
<td> </td>
<td>Hello</td>
</tr>
<tr>
<td> 200</td>
<td>Monday</td>
</tr>
<tr>
<td>500+500 </td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
4条答案
按热度按时间bd1hkmkf1#
只需使用类选择器
.info
定位表元素,然后找到所有td
为first-child
的元素,然后按文本内容过滤它们(注意:即使HTML中有空格,textContent也会返回空字符串)。最后使用jQuery.css
设置背景颜色。或者,您可以定义CSS
规则并使用jQuery.addClass
。qni6mghb2#
你想要多少传统的支持?有一个新的浏览器css选择器
:has
可以帮助你。不过,您仍然需要一些JavaScript:
演示
hm2xizp93#
你瞄准的是错误的元素。
$(this)应该返回每个
td
元素。您不清楚Amount列的值是什么意思?我建议在元素中添加id。这样您就可以定位特定的列。例如:
xvw2m8pv4#
你可以通过使用css来实现这一点。注意"td"中的空间被删除了。