如何在 javascript 和/或 jquery 中对具有多列的 HTML 表进行排序答案

【问题标题】：How to sort an HTML table with multiple columns in javascript and/or jquery如何在 javascript 和/或 jquery 中对具有多列的 HTML 表进行排序
【发布时间】：2012-07-26 15:28:28
【问题描述】：

所以我喜欢自学并寻求帮助。我不想使用 javascript/jquery 插件，因为我想开发自己的代码。那么如何通过单击按钮按字母顺序对表格进行排序？当他们单击按钮时，该行将按字母顺序排列，该行的其余部分将按照正在排序的列进行排序。谢谢！

<table id=sortableTable">
    <thead id="myTHead">
      <tr>
         <th> Month </th>
         <th> Population </th>
      </tr>
   </thead>
   <tbody id="myBody">
<tr>
<td>March</td>
<td>100</td>
</tr>
<tr>
<td>April</td>
<td>300</td>
</tr>
 <tr>
<td>Febuary</td>
<td>200</td>
</tr>

【问题讨论】：

好的，如果你想开发自己的代码，到目前为止你尝试过什么？
我试过只做一个无序列表。我得到了排序。然后我尝试将相同的思维过程和格式放入表格中，但它不起作用，更糟糕的是我必须按列对其进行排序，然后行跟随它

标签： javascript jquery html arrays jquery-ui-sortable

【解决方案1】：

我不会给你一个代码示例，因为你要问的是一段相当长的代码。但是您需要明智地做的是确保您拥有使用特定 ID 生成的所有表格元素。可能是 id="colnum_rownum" 的格式。

如果每列都有一个排序按钮，它们可能需要自己的 ID；以及 id="sort_colnum"。

当您单击该按钮时，您会想要调用一个函数，该函数将获取包含您单击的列 ID 的所有元素。然后，您将对它们进行排序以了解需要将哪些行号移动到哪里。然后，您将 DOM 中的这些行移动到它们的新位置，并可能修改 id 以反映它们的新位置，以便稍后在单击另一个按钮时再次排序。

虽然从学术理解的角度来解决这样的事情是一件有趣的事情。从实际的角度来看，当已经有许多好的解决方案时，花时间来实现这样的事情是很疯狂的。

【讨论】：

如果插件的意思是您不会加载任何外部 javascript 框架或第三方脚本，那么不，您几乎可以自己构建它。

【解决方案2】：

我刚刚在另一篇类似主题的帖子中发现了这个：

http://www.allmyscripts.com/Table_Sort/

据了解，它是 javasript 中用于 html 表的开源排序功能。看起来有趣、简单且有用。

【讨论】：