1

私は以下のようなテーブルを持っています

<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()関数のみを使用して、テーブルの「th」ではなく「td」要素のみの代替行の色を設定したい。私は試してみました

<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」要素も受け入れます。それを避ける方法は？

助けてください

ありがとう

4

3 に答える 3

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/

これら 2 つは、s の行が 1 つしかないことを前提としています<th>。

</p>

于 2012-06-04T04:27:34.000 に答える
1

デモ: 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; }
于 2012-06-04T04:38:17.847 に答える
0

css のみの簡単な修正:

<style type="text/css">   
    tr.even td{ background-color: green; }   
    tr.odd td{ background-color: yellow; }
 </style>
于 2012-06-04T05:04:37.610 に答える