Jquery 切换行颜色

Jquery 切换行颜色,jquery,Jquery,我在页脚中有一个表格单元格,允许用户启用行着色: $('#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', t

我在页脚中有一个表格单元格,允许用户启用行着色:

$('#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=“偶数”,则删除“偶数”和“奇数”,否则执行RowColors函数。

我的建议是稍微不同一点。只有一个类的默认状态是另一个。因此:

tr td { background: yellow; }
tr.odd td { background: blue; }
这很简单:

$("tr").toggleClass("odd");
或者更具体地说:

$("tbody > tr").removeClass("odd").filter(":nth-child(odd)").addClass("odd");
注意:避免使用
:奇数
:偶数
。他们通常不是你认为他们的意思
:n个孩子(奇数)
:n个孩子(偶数)
往往是你真正的意思

我可能会这样写:

$("#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()
方法,它们做同样的事情。

纯CSS可以实现行颜色的交替(只要不需要支持IE6/7):


有一个名为jQuery的插件已经完成了这项工作。你可以使用它,或者查看代码?

我不太明白这个问题的最后一部分。“只要你不需要支持IE6/7”…有人这么幸运吗?克莱特斯:我喜欢这一步。我需要能够切换突出显示,这样,如果已经有一个tr class=“odd”,那么删除类odd,否则添加类odd。哦,我看到我没有正确沟通的地方了。我所说的toggle是指没有样式,或者奇数行被样式化。如何在JavaScript和jQuery中编写IF/THEN语句?如果我有一个选择器,比如$('.odd'),它返回了一些东西,那么如何检查它是否返回了一些东西,而不是什么都没有?
tr { background-color: green; }
tr:nth-child(even) { background-color: red; }