1

現在、次の jQuery スクリプトを使用してテーブル内の行を強調表示していますが、うまく機能しています。

   <script type="text/javascript">
        $(document).ready(function()
        {
            $('table.grid tbody tr:odd').addClass('alt');
        });
    </script>

これは、各行が真に新しいレコードであるデータのテーブルではうまく機能しますが、2 行のデータを使用するレコードがあり、jQuery を変更して次のようにレンダリングするという問題に遭遇しました。

<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Record 1 Field 1</td>
            <td>Record 1 Field 2</td>
        </tr>
        <tr>
            <td colspan="2">Record 1 Field 3</td>
        </tr>
        <tr class="alt1">
            <td>Record 2 Field 1</td>
            <td>Record 2 Field 2</td>
        </tr>
        <tr class="alt2">
            <td colspan="2">Record 2 Field 3</td>
        </tr>
        <tr>
            <td>Record 3 Field 1</td>
            <td>Record 3 Field 2</td>
        </tr>
        <tr>
            <td colspan="3">Record 1 Field 3</td>
        </tr>
        <tr class="alt1">
            <td>Record 4 Field 1</td>
            <td>Record 4 Field 2</td>
        </tr>
    <tr class="alt2">
        <td colspan="4">Record 2 Field 3</td>
    </tr>
</tbody>
</table>

3行ごとに「alt1」のクラスを持ち、4行ごとに「alt2」のクラスを持つようにしたいjQueryでこれをどのように達成しますか?

4

6 に答える 6

4

上記の答えは少し正しいです。i%3==0 と i%4==0 を使用する代わりに、同じモジュラス除数を使用します。したがって、0 から開始して、i%4==2 および i%4==3 は、2 つスキップし、2 つ取得し、2 つスキップし、2 つ取得する、というようになります。他の方法では、3、4、6、8、9、12 が取得されます。 、など。したがって、マイナーな変更は

<script type="text/javascript">
    $(document).ready(function()
    {
        $('table.grid tbody tr').each(function(i) {
            if(i%4 == 2) {
                //Each 3rd row in sets of 4
                $(this).addClass('alt1');
            }
            if(i%4 == 3) {
                //Each 4th row in sets of 4
                $(this).addClass('alt2');
            }
        });
    });
</script>
于 2009-03-23T16:28:56.143 に答える
2 
   <script type="text/javascript">
        $(document).ready(function()
        {
            $('table.grid tbody tr').each(function(i) {
                if(i%3 == 0) {
                    //We're at a 3rd row
                    $(this).addClass('alt1');
                }
                if(i%4 == 0) {
                    //We're at at 4th row
                    $(this).addClass('alt2');
                }
            });
        });
    </script>
于 2009-03-23T16:16:46.143 に答える
1 
$('table.grid tbody tr:nth-child(4n+2)').addClass('alt1');
$('table.grid tbody tr:nth-child(4n+3)').addClass('alt2');

動作するはずです（テストされていません）。

于 2009-03-23T17:10:00.460 に答える
0

うーん、そのテーブル構造はかなり変わっています。そのようなテーブルに入れるサンプル データのいくつかを示すことができますか?

私が考えることができるほとんどの場合、rowspan (Nerdling が述べたように)、または本体内の追加の TH 要素 (各レコードにタイトル行を与えるため)、または両方の組み合わせを使用する方がより正確です。

構造に追加の詳細レベルがあれば、スクリプトにストライプ 3/ストライプ 4 の値をハードコーディングするのではなく、javascript を記述してテーブルの実際の構造を読み取ることができます。たとえば、余分なことを何もせずに 3 行のレコードを処理するスクリプトになってしまいます。

サンプルデータを見せていただければ、喜んでスクリプトを作成します。

于 2009-03-24T09:59:13.733 に答える
-1

別の行を占める場合は、rowspan (HTML) 属性を使用してそのことを示します。

于 2009-03-23T16:11:23.970 に答える