Question

我有一个包含很多行的表。有些行具有特殊颜色，我想使用jquery获取该tr元素的数组。我使用选择器但没有工作

$("#tbodySample").children("tr[background-color='rgb(79,79,79)']").length;

$("#tbodySample").children("tr[style='background-color:rgb(79,79,79)']").length;

$("#tbodySample").children("tr[style='{background-color:rgb(79,79,79)}']").length;

$("#tbodySample").children("tr[background-color='#4F4F4F']").length;

$("#tbodySample").children("tr[style='background-color:#4F4F4F']").length;

$("#tbodySample").children("tr[style='{background-color:#4F4F4F}']").length;

我的HTML是

<table>
<tbody id="tbodySample">
<tr class="selectable" style="background-color: rgb(79, 79, 79);">contents</tr>
<tr class="selectable" style="background-color: rgb(52, 52, 52);">contents</tr>
<tr class="selectable" style="background-color: rgb(52, 52, 52);">contents</tr>
<tr class="selectable" style="background-color: rgb(52, 52, 52);">contents</tr>
<tr class="selectable" style="background-color: rgb(79, 79, 79);">contents</tr>
.
.
.
</tbody>
</table>

以上所有陈述均返回0。有没有可靠的方法来实现这个目标？

Answer 1

您可以使用过滤器检查背景颜色。我正在检查.css('color')对十六进制值和rgb值的跨浏览器兼容性：

var count = $('#tbodySample').find('tr').filter(function(){
    var colors = ["#4F4F4F","rgb(79, 79, 79)"];
    return $.inArray($(this).css('background-color'), colors) !== -1;
}).length;

JSFiddle

注意：您的HTML无效，<td>元素必须是直接子元素或<tr>元素

Answer 2

试试这个：

$("#tbodySample tr[style*='background-color: rgb(79, 79, 79);']").length

使用选择器获取具有特定背景颜色的所有tr

2 个答案: