jquery - 如何使用 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。