2

複数のテーブルでZebraウィジェットを使用してjQueryTablesorterを使用しています。私がやろうとしているのは、追加するために各テーブルに異なる色を持たせることです。現在、すべての追加行を青色にするblue_style.cssを使用しています。

1つはそのようなもので、2つ目は青、2つ目は黄色、3つ目はピンク、4つ目は緑です。

IDコードを使ってみましたが、うまくいきませんでした。

各テーブルはこのように始まります

。。。

<script id="js">$(function() {

    $(".tablesorter")
        .tablesorter({
            // this is the default setting
            cssChildRow: "expand-child",

            // initialize zebra and filter widgets
            widgets: ["zebra", "filter"],

            widgetOptions: {
                // include child row content while filtering, if true
                filter_childRows  : true,
                // class name applied to filter row and each input
                filter_cssFilter  : 'tablesorter-filter',
                // search from beginning
                filter_startsWith : false
            }

        });

    // hide child rows
    $('.expand-child td').show();

    // Toggle child row content (td), not hiding the row since we are using rowspan
    // Using delegate because the pager plugin rebuilds the table after each page change
    // "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
    $('.tablesorter').delegate('.toggle', 'click' ,function(){

        // use "nextUntil" to toggle multiple child rows
        // toggle table cells instead of the row
        $(this).closest('tr').nextUntil('tr:not(.expand-child)').find('td').toggle();

        return false;
    });

    // Toggle widgetFilterChildRows option
    $('button.toggle-option').click(function(){
        var c = $('.tablesorter')[0].config.widgetOptions,
        o = !c.filter_childRows;
        c.filter_childRows = o;
        $('.state').html(o.toString());
        // update filter
        $('input.tablesorter-filter').trigger('search');
    });

});</script>
</head>
<body>
   <table class="tablesorter">
    <colgroup>
        <col width="135" />
        <col width="60" />
        <col width="150" />
        <col width="210" />
        <col width="20" />
    </colgroup>
    <thead>
        <tr>
            <th>HORSE</th>
            <th>YEAR FOALED</th>
            <th>RIDER</th>
            <th>OWNER</th>
            <th>TOTAL</th>
        </tr>
    </thead>
    <tbody>

。。。

子行が常に展開されるように、Zebraの一部を変更しました。

そしてstyle.cssで

/* Zebra Widget - row alternating colors */
table.tablesorter tr.odd td {
    background-color: #f0f0ff;
}
table.tablesorter tr.even td {
    background-color: #fff;
}

すべての奇数の背景色を青にします（＃f0f0ff）

これは私が試した方法です（これはうまくいきませんでした）

2番目のテーブル：

<body>
 <div id="5year">
       <table class="tablesorter">
        <colgroup>

。。3番目の表：

<body>
 <div id="6year">
       <table class="tablesorter">
        <colgroup>

。。次に、これをcssに追加します。

/* Zebra Widget - row alternating colors */
    table.tablesorter tr.odd td {
        background-color: #f0f0ff;
    }
    #5year table.tablesorter tr.odd td {
        background-color: #eef2dd;
    }
    #6year table.tablesorter tr.odd td {
        background-color: #eed9de;
    }
    #78year table.tablesorter tr.odd td {
        background-color: #b8e4de;
    }   
    table.tablesorter tr.even td {
        background-color: #fff;
    }

クラス名（.tablesorter）を実際に変更できないため、テーブルをラップしました。変更すると、テーブルソーター関数がすべて壊れて機能しなくなります。しかし、すべてのテーブルは通常のテーブルとまったく同じで、すべて青で... :(

これが私が簡単に説明できるフォトショップを持っていたことがわかる画像のURLです。

http://tournaments.angelstone.co/yhs/images/zebra_example.jpg

ところで、私はそれらすべてを1ページで使用しています。ページごとに1つのテーブルですが、テーブルごとに特定のcssファイルを指定できないWordpressページで使用しているため、すべてのページで共有するには1つのstyle.cssファイルを使用する必要があります。

誰かがこの問題を解決する方法を知っていますか？本当にありがたいです。（私の母国語ではなく、私の悪い英語でごめんなさい）ありがとう。ヴィック

4

1 に答える 1

1

本当に必要なのはwidgetOptions.zebra、次のようにクラス名の設定を変更することだけです ( demo ):

Javascript

$('#5year').tablesorter({
    widgets: ['zebra']
});

$('#6year').tablesorter({
    widgets: ['zebra'],
    widgetOptions: {
        zebra: ["even", "odd6"] // odd rows have a different class name
    }
});

$('#7year').tablesorter({
    widgets: ['zebra'],
    widgetOptions: {
        zebra: ["even", "odd7"] // odd rows have a different class name
    }
});​

CSS

table.tablesorter tr.odd6 td {
    background-color: #fcfef0;
}
table.tablesorter tr.odd7 td {
    background-color: #fcf1ef;
}​
于 2012-05-20T05:35:20.650 に答える