如何使用 jQuery（或 CSS）按列对 HTML 表格进行排序？

Question

我希望能够取一张 HTML 表格，比如here：

<table border="1">
    <tbody>
        <thead>
        <tr>
            <th></th>
            <th><a href="http://translate.com" target="_blank">translate.com &amp; https://translate.google.com</a></th>
            <th><a href="http://www.bing.com/translator/" target="_blank">Bing Translator</a></th>
            <th></th>
        </tr>
        </thead>
        <tr>
            <td>I eat tacos</td>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
        <tr>
            <td>I will eat a taco</td>
            <td>Voy a comer un taco</td>
            <td>Me voy a comer un taco</td>
        </tr>
        <tr>
            <td>I will eat tacos</td>
            <td>Voy a comer tacos</td>
            <td>Me voy a comer tacos</td>
        </tr>
        <tr>
            <td>I would eat a taco</td>
            <td>Me volvería a comer un taco</td>
            <td>Comer un taco</td>
        </tr>
        <tr>
            <td>I would eat tacos</td>
            <td>Me volvería a comer tacos</td>
            <td>Comer tacos</td>
        </tr>
        <tr>
            <td>I am eating a taco</td>
            <td>Me estoy comiendo un taco</td>
            <td>Estoy comiendo un taco</td>
        </tr>
        <tr>
            <td>I am eating tacos</td>
            <td>Estoy comiendo tacos</td>
            <td>Voy a comer tacos</td>
        </tr>
            . . .
        <tr>
            <td>They were eating tacos</td>
            <td>Estaban comiendo tacos</td>
            <td>Estaban comiendo tacos</td>
        </tr>
    </tbody>
</table>

（或任何 HTML 表格）并允许在单击列时对其进行排序。

jQuery 或 CSS 解决方案都可以。

Answer 1

jQuery 表格排序器 (http://tablesorter.com/docs/) 可以工作。有许多不同的 jQuery 插件来处理这个问题。如果尚未使用 jQuery，也有纯 Javascript 选项。

33 Javascript 表格排序解决方案 (http://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/)。

CSS 无法对数据进行排序；必须使用 Javascript。