2

tablesorter プラグインと zebra ウィジェットに問題があり、偶数/奇数行に異なるスタイルを有効にしています。

私のページは空のテーブルから始まります。次に、ユーザーがフォームをコンパイルすると、テーブルがロードされます...したがって、問題は次のとおりです。初期ロード（列もソートします）でゼブラストライプが機能しません。私の行はすべて同じ背景色を持っています..しかし、ユーザーが列の並べ替えを開始したり、他のページ結果に移動したりすると（同じテーブルの「ページャー」アドオンを使用して）、ゼブラウィジェットが機能します。

なにが問題ですか？

Jquery バージョン: 1.9.0

テーブルソーターのバージョン: 2.7.12

ここに私のJavaScriptコードがあります:

$("table").tablesorter({
    widthFixed: true,
    sortList: [[3,0]],
    widgets: ["zebra"],
    widgetOptions:{
        zebra: ["even","odd"]
    }
});

前もって感謝します！

4

2 に答える 2

1

css のみのソリューションを使用して、ie8 以前の jQuery でバックアップできます

ここでフィドルを見てください：http://jsfiddle.net/GZPqE/

<table class="zebra">
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
</table>

/*CSS*/
.zebra tr:nth-child(even) {
  background-color: #333;
  color: #fff;
}

/*
 * uncomment this to see the jQuery solution
 $("tr:nth-child(even)").css({"background-color":"blue", "color":"#fff"});
 */
于 2013-03-18T18:29:01.703 に答える
0

CSS を使用して、偶数行と奇数行に色を付けます。

$("table")
  .tablesorter({
    widthFixed: true,
    sortList: [[3,0]],
    widgets: ["zebra"],
    widgetOptions:{
      zebra: ["even","odd"]
    }
  })
  .find('tr:nth-child(even)')
    .css('background-color', 'white')
    .end()
  .find('tr:nth-child(odd)')
    .css('background-color', 'lightgray')
    .end();
于 2013-03-18T18:12:44.687 に答える