使用javascript或jquery排序html中的列

Ordering of Columns in html using javascript or jquery

本文关键字：html 排序 javascript jquery 使用      更新时间：2023-09-26

我正面临一个关于列排序的解决方案的问题。我使用了许多第三方库，如danvk库，jqGrid来拖动列。但我想做的是。我有一个div，里面有五个字段。{FirstNJame,LastName,Address,Phone,Designation}也有上下按钮，这样我就可以上下移动字段。在Ok按钮上，我想让我的表按照我在div上设置的字段顺序排序，简而言之，改变标题和主体，改变div中设置的顺序。我已经编程了上下，前后。我只需要一个解决方案来移动在javascript或jquery列的位置。谢谢。

这应该可以让您继续:http://jsfiddle.net/S9ykD/

代码(使用jQuery): 
var order = [0,2,1,3];
$(function() {
    $("table tr").each(function() {
        var orderedTds = new Array();
        for (var i=0; i<order.length;i++)
          orderedTds[i] = $(this).children("td")[order[i]];
        for (var i=0; i<order.length;i++)
          $(this).append(orderedTds[i]);
    });   
});

这是样例标记:

<table>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
        <td>444</td>
    </tr>
</table>

使用一些js库-我建议使用数据表，这是非常好的，你可以完成几乎所有的事情，是非常可定制的。或者用你习惯的东西。然后只需处理按钮上的click事件并将配置发送到库。这可以用数据表很好地完成。参考数据表API文档中的fnSort或fnSortListener

相关文章：