Tablesorter jQuery ZebraStrip不工作

Question

我遵循这个链接来制作tablesorter。我试着遵循这个方法，但它并没有很好的恢复。

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

这样可以做到：

<!-- your table code -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="LINKTOPLUGIN.js">
<script>
$(document).ready(function () {
    $("#myTable").tablesorter();
});
</script>

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) td {
    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;
}

Answer 2

问题在于CSS规则。

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

需要参考td

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