使用JQuery的each（）方法以交替行颜色发出问题

Question

我有一张

下的表格

<table >
        <tr>
            <th scope="col">EmpId</th><th scope="col">EmpName</th>
        </tr>
        <tr>
            <td>1</td><td>ABC</td>
        </tr>
        <tr>
            <td>2</td><td>DEF</td>
        </tr>
</table>

我想设置表格的“td”元素的备用行颜色，而不是仅使用每个（）函数设置的“th”。我试过

<style type="text/css">   
    tr.even { background-color: green; }   
    tr.odd { background-color: yellow; }
</style>
 $(document).ready(function () {
 $('table > tbody').each(function () {
            $('tr:odd',  this).addClass('odd').removeClass('even');
            $('tr:even', this).addClass('even').removeClass('odd');
        });
 });

虽然这有效，但它也接受“th”元素。如何避免？

请帮忙

由于

Answer 1

一个简单的解决方案是将<th>行放在<thead>内并添加明确的<tbody>：

<table>
    <thead>
        <tr>
            <th scope="col">EmpId</th><th scope="col">EmpName</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td><td>ABC</td>
        </tr>
        <tr>
            <td>2</td><td>DEF</td>
        </tr>
    </tbody>
</table>​

演示：http://jsfiddle.net/ambiguous/bGvA2/

---

如果您无法更改HTML以使其合理，那么您可以执行以下操作：

$('table tr').not(':first').each(function(i) {
    $(this).addClass(i % 2 ? 'odd' : 'even');
});​

演示：http://jsfiddle.net/ambiguous/TGfrF/

或者也许：

$('table tr').not(':first')
    .filter(':even').addClass('even').end()
    .filter(':odd' ).addClass('odd');

演示：http://jsfiddle.net/ambiguous/GNFaC/

这两个人假设你只有一行<th> s。

Answer 2

演示： on Jsfiddle

    $('table tr').not(':first')
    .filter(':even').addClass('even').end()
    .filter(':odd' ).addClass('odd');​
    $('table tr:first-child').addClass('head').removeClass('odd');// will style the heading

OR

$(document).ready(function () {
 $('table > tbody').each(function () {
            $('tr:odd',  this).addClass('odd').removeClass('even');
            $('tr:even', this).addClass('even').removeClass('odd');
        });
    $('table tr:first-child').addClass('head').removeClass('odd'); // will style the heading
 });

<强>风格：

    tr.even { background-color: green; }   
    tr.odd { background-color: yellow; }
    tr.head { background-color: red; }

Answer 3

仅使用css进行简单修复：

<style type="text/css">   
    tr.even td{ background-color: green; }   
    tr.odd td{ background-color: yellow; }
 </style>