2

我在多个表上使用带有 Zebra 小部件的 jQuery Tablesorter。我想要做的是让每张桌子都有不同的颜色来添加。当前使用 blue_style.css 使每个添加行都变成蓝色。

一个是这样的——蓝色的，第二个是黄色的，第三个是粉红色的，第四个是绿色的......像这样的东西。

我尝试使用 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)

这就是我尝试的方式（没有用）

第二张表：

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

. . 第三张表：

<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），所以我已经用它包裹了表格 - 如果我这样做了，tablesorter 函数都会中断并且不起作用。但所有的桌子都和普通的一样，都是蓝色的...... :(

这是图片网址，您可以看到我有 Photoshop 易于解释。

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

顺便说一句，我在一页中使用它们。每页一个表，但必须使用一个 style.css 文件来共享到每个页面，因为我在 Wordpress 页面上使用它们，我无法为每个表指定特定的 css 文件。

任何人都知道如何解决这个问题？我会非常感激。（对不起我的英语不好......不是我的母语）谢谢和问候。维克

4

1 回答 1

1

您真正需要做的就是更改widgetOptions.zebra类名设置，如下所示（演示）：

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 回答