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; }