一千萬個為什麽

搜索
當前位置: 首頁 > 切換行顏色

切換行顏色

我在頁腳中有一個表格單元格,允許用戶打開行著色:

$('#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函數。

最佳答案

我的建議是略有不同。只有一個類的默認狀態是另一個。所以:

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

然後這很簡單:

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

或者更具體地說:

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

Note: avoid using :odd and :even. They usually don't mean what you think they mean. :nth-child(odd) and :nth-child(even) tend to be what you really mean.

我可能會寫一些像:

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

如果您願意,可將其放入單獨的功能中。

Edit: to check whether something is empty:

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

jQuery對象支持 length 屬性和 size()方法,它們執行相同的操作。

轉載註明原文: 切換行顏色