Question

我在页脚中有一个表格单元格，允许用户打开行着色：

$('#highlight').click(function() {
$(this).parents('table').RowColors();
})

// From Chapter 7 of Learning jQuery
$.fn.RowColors = function() {
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
};

问：如何编写一个选择器：如果至少有一行class =“even”，则删除“even”和“odd”ELSE执行RowColors函数。

Answer 1

我的建议是略有不同。只有一个类的默认状态是另一个。所以：

tr td { background: yellow; }
tr.odd td { background: blue; }

然后就这么简单：

$("tr").toggleClass("odd");

或更具体地说：

$("tbody > tr").removeClass("odd").filter(":nth-child(odd)").addClass("odd");

注意：避免使用:odd和:even。它们通常并不代表您认为的含义。 :nth-child(odd)和:nth-child(even)往往是你真正的意思。

我可能会写一些类似的东西：

$("#highlight").click(function() {
  $(this).closest("table").children("tbody").children("tr").removeClass("odd")
    .filter(":nth-child(odd)").addClass("odd");
  return false;
});

如果您愿意，可将其放入单独的功能中。

编辑以检查某些内容是否为空：

var odd = $(".odd");
if (odd.length == 0) {
  // do one thing
} else {
  // do something else
}

jQuery对象支持length属性和size()方法，它们执行相同的操作。

Answer 2

交替的行颜色可以用纯CSS完成（只要你不需要支持IE6 / 7）：

tr { background-color: green; }
tr:nth-child(even) { background-color: red; }

Answer 3

有一个名为Colorize的jQuery插件已经这样做了。你可以使用它，或查看代码吗？

切换行颜色

3 个答案: