javascript - Tablesorter jQuery ZebraStrip 不工作

Question

我正在关注这个 link制作 tablesorter jquery。我已尝试遵循该方法，但效果不佳。

HTML

<table id="myTable" class="tablesorter">
    <thead>
        <tr> 
            <th>USERNAME</th>
            <th>EMAIL</th>
            <th>DATE</th>
            <th>NICKNAME</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> Hello </td> 
            <td> test@gmail.com </td>
            <td> January </td>
            <td> Hatchiu </td>
        </tr>
        <tr>
            <td> Hello </td> 
            <td> test@gmail.com </td>
            <td> January </td>
            <td> Hatchiu </td>
        </tr>
        <tr>
            <td> Hello </td> 
            <td> test@gmail.com </td>
            <td> January </td>
            <td> Hatchiu </td>
        </tr>
    </tbody>
</table>

CSS..

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 12px;
    width: 100%;
    text-align:left;
}

table.tablesorter thead tr th {
    background-color: #E6EEEE;
    border: 1px solid #CCC;
    font-size: 10px;
    padding: 4px;
    text-align:center;
    vertical-align:middle;
}

table.tablesorter tbody td {
    padding: 4px;
    background-color: #FFF;
    vertical-align: middle;
    border: 1px solid #CCC;
}

table.tablesorter tbody tr:nth-child(odd) {
    background-color:yellow;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}

table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

Javascript

$(document).ready(function() 
        { 
            $("#myTable").tablesorter(); 
        } 
    ); 

而且我还有 jquery-latest.js 和 jquery.tablesorter.js。

这些有几个问题。

1. 斑马线剥离不起作用

2. 上升和下降不起作用。

和JSFIDDLE检查出来。

有什么想法吗？

Answer 1

问题出在 CSS 规则上。

table.tablesorter tbody tr:nth-child(odd) {
    background-color:yellow;
}

需要引用td

table.tablesorter tbody tr:nth-child(odd) td{
    background-color:yellow;
}