2

jQueryを使用してゼブラストリップを持つ3つのテーブルがあることがわかるので、私は問題のためにこのフィドルを作成しました。

表 1 は、tr インデックスを 0 から偶数として開始するため、正しい形式で表示されています。表 2 は前の表から継続しており、1 行目が黒ではなく白で表示されています。最後のテーブルの tr インデックスから続いているために発生していると思います。

HTML:

<table>
    <caption> Table 1</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table>
    <caption> Table 2</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table>
    <caption> Table 3</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>​

JavaScript:

$('table').find('tr:even').css('background','#d0d0d0');

フィドル: http://jsfiddle.net/daljir/gryh5/

4

5 に答える 5

5

find()各テーブルを個別に「作業」するために使用できます。

$("table").find("tr:even").css("background", "#d0d0d0");

デモ: http://jsfiddle.net/gryh5/1/

于 2012-09-26T08:07:20.803 に答える
4

ドキュメント内のすべての<tr>要素を選択しています。 nth-childto セレクターを使用して、ドキュメント内の偶数番号<tr>の s をすべて選択できます。

$('table tr:nth-child(2n)').css('background','#d0d0d0');

http://jsfiddle.net/Kyle_Sevenoaks/gryh5/7/

于 2012-09-26T08:10:22.157 に答える
1

これは、(テーブルに関係なく) 一般にすべての tr を選択しているためであり、それらを積み重ねると、この特定の動作が発生します。これを試して：

$('table').find('tr:even').css('background','#d0d0d0');

フィドルをチェック

于 2012-09-26T08:06:57.053 に答える
0

http://jsfiddle.net/gryh5/9/

$('table').each(function(){
   $(this).find('tr').filter(':even').css('background','#d0d0d0');
});
于 2012-09-26T08:20:07.233 に答える
0

これは機能します

<table id="t1">
    <caption> Table 1</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table id="t2">
    <caption> Table 2</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table id="t3">
    <caption> Table 3</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

およびJS：

$(function(){
    $('#t1 tr:even, #t2 tr:even, #t3 tr:even').css('background','#d0d0d0');
});

jsfiddle: http://jsfiddle.net/SnakeEyes/gryh5/2/

于 2012-09-26T08:08:39.300 に答える