Question

我在多个表上使用jQuery Tablesorter和Zebra小部件。我要做的是让每张桌子都有不同的颜色来添加。目前使用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文件。

任何人都知道如何解决这个问题？我真的很感激。（抱歉我的英语不好......不是我的母语）感谢致敬。维克

Answer 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;
}

jQuery Tablesorter - 带有Zebra小部件的多个表 - 每个表添加不同的颜色

1 个答案: