使用jQuery統一格式化各種表格中的單元格

Question

我有一個包含多個表格的頁面，我想格式化每個表格，以便每個其他行的第二個單元格具有特定的背景顏色。 我曾嘗試以下的jQuery代碼在回答中提出這個問題的最初版本：

$('table tr:odd td:nth-child(2)').css("background-color", "#F6F3EE"); 

這隻要所有的表都具有偶數行的正常工作。如果不是這種情況，格式會反轉，就好像jQuery認爲s是一個表的一部分，並且不會在每個表中重新啓動計數器一樣。

這裏有一個鏈接到一個js小提琴來說明這個問題：

http://jsfiddle.net/davidThomas/eAHUF/

Answer 1

你只選擇第一td元素是的後代tr.reg:even排。

嘗試使用:nth-child()替代：

$('table tr:odd td:nth-child(2)').css('background-color','#ffa');​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

JS Fiddle demo。

注意：你必須記住，CSS :nth-child()是基於一，而不是基於零（如JavaScript）。

---

響應OP的評論編輯，如下：

...但它送給我一個問題。我編輯了你的jsfiddle演示，在第一個表中添加一行，從而爲它提供不均勻的行數。現在第二張桌子的行被反向突出顯示，這不是我正在尋找的東西。你有解決這個問題嗎？

是的，我...錯過了顯而易見的（不知何故）。我已經修改了上面的代碼依次查看各個table，然後查找:odd行和nth-child()：

$('table').find('tr:odd td:nth-child(2)').css('background-color','#ffa');​ 

JS Fiddle demo。

參考文獻：

• find()。
• :nth-child()。
• :odd selector。

Answer 2

試試這個：

$('table tr.reg:even td:eq(1)').each(function(index) { 
    $(this).css("background-color", "#F4F4F8"); 
}); 

Answer 3

最簡單的辦法就是：

$("table tr:even td:nth-child(2)").css("background-color", "#F4F4F8"); 

你可以看到它在這裏的行動：http://jsfiddle.net/rowanmanning/pBCkj/