Question

我必须做一些愚蠢的错事，但我没有看到它。在我的网站上，我将JQuery TableSorter附加到表中，并希望完成一些排序，但点击无效。没有排序。它只是一个静态表。

这是我正在解决的问题的简化JSFiddle：

这是一个非常简单的javascript表，如下所示：

<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
    <thead>
        <tr class="nav">
            <td>
                <input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
            </td>
            <td>Gift Cert</td>
            <td>Note</td>
            <td>Order #</td>
            <td>Order Date</td>
            <td>Amount</td>
            <td>Redeemed</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td valign="top"></td>
            <td>ss1q</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>    <a href="test.php">Sale</a>

            </td>
            <td>true</td>
        </tr>
        <tr>
            <td valign="top">
                <input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
            </td>
            <td>443ss</td>
            <td>(1d10t) Arizona Tea</td>
            <td>-</td>
            <td>-</td>
            <td>$50.00</td>
            <td>-</td>
        </tr>
        <tr>
            <td valign="top">
                <input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
            </td>
            <td>199e</td>
            <td>(#9000) Over</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>-</td>
        </tr>
        <tr>
            <td valign="top">
                <input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
            </td>
            <td>F990</td>
            <td>($09aa) Trouble</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

JavaScript的：

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

有什么明显的东西我不见了吗？

Answer 1

尝试更改标题行以使用<th>标记而不是<td>标记。

Answer 2

这是由于HTML表上的标记造成的。

在thead元素中，您需要使用th标签而不是td。

<thead>
    <tr>
        <th></th>
        ...
    </tr>
</thead>

工作JSfiddle：

http://jsfiddle.net/bybFK/

Answer 3

当你创建桌子的标题时，你肯定会忽略某些东西;您正在使用<td>而非使用<th> 您也不需要分配班级tablesorter to your table

<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
    <thead>
        <tr class="nav">
            <th>
                <input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
            </th>
            <th>Gift Cert</th>
            <th>Note</th>
            <th>Order #</th>
            <th>Order Date</th>
            <th>Amount</th>
            <th>Redeemed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td valign="top"></td>
            <td>ss1q</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>    <a href="test.php">Sale</a>

            </td>
            <td>true</td>
        </tr>
<tr>
            <td valign="top">
                <input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
            </td>
            <td>F990</td>
            <td>($09aa) Trouble</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

JavaScript的：

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

http://tablesorter.com/docs/

JQuery TableSorter单击操作无效

3 个答案: