jquery - 使用 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>

我想只使用 each()函数来设置表的“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>行放入 a<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。

​</p>

Answer 2

演示： 在 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

或者

$(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>