对javascript的元素进行排序

这里有一个简单的javascript函数，可以对任何一组标记元素进行排序：

function sortElements(parentId, tagClass) {
    var itemsToSort, p = document.getElementById(parentId);
    if (p.getElementsByClassName) {
        itemsToSort = p.getElementsByClassName(tagClass);
    } else {
        itemsToSort = getElementsByClassName(tagClass, "*", p);
    }
    // get all data into a sortable array
    var data = [], order = [], item, placeHolder, i;
    for (i = 0; i < itemsToSort.length; i++) {
        item = itemsToSort[i];
        // save position of item by inserting a placeholder right before it
        placeHolder = document.createElement(item.tagName);
        item.parentNode.insertBefore(placeHolder, item);
        order.push(placeHolder);
        // save item and text
        data.push({obj: item, text: strTrim(item.innerHTML)});
    }
    // sort the item array by the text
    data.sort(function(a, b) {
        return(a.text.localeCompare(b.text));
    });
    // now reinsert items in sorted order
    for (i = 0; i < data.length; i++) {
        item = data[i].obj;
        placeHolder = order[i];
        // insert in new location
        placeHolder.parentNode.insertBefore(item, placeHolder);
        // remove placeholder
        placeHolder.parentNode.removeChild(placeHolder);
    }
}
function strTrim(str) {
    return(str.replace(/^'s+/, "").replace(/'s+$/, ""));
}
// replacement for older versions of IE
function getElementsByClassName(className, tag, elm){
    var testClass = new RegExp("(^|''s)" + className + "(''s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }
    }
    return returnElements;
}

​你可以在这里看到它的工作原理：http://jsfiddle.net/jfriend00/EztNw/.这个演示展示了它对OP的表单元格和有序列表进行排序，只是为了表明该函数适用于任何一组元素。

我知道的唯一限制是，标记元素不能是其他标记元素的子元素。适用于表中的单元格。

这也使用getElementsByClassName()，所以如果需要旧版本的IE，那么将添加一个替代/填充程序（包含在jsFiddle中）。

这是如何工作的：

1. 获取要排序的所有对象的列表
2. 将一个临时占位符对象放在每个项目当前所在的位置，这样我们就知道将东西按排序放回哪里
3. 构建要排序的对象和排序键（本例中为文本）的数组
4. 对该数组进行排序
5. 按照现在排序的顺序重新插入已排序的对象，使用占位符作为它们的去向指南-在使用占位符的插槽后删除占位符

​

简单方法：

1. 在JS数组中加载名称
2. 排序JS数组
3. 从数组生成并插入表

假设您只想用Javascript 完成这一切

    var names = ["rob", "mike", "chuck", "kev" };
    names.sort(); //gives you an array with [chuck, kev, mike, rob]

您的表作为对象

    var table = "<table width='a number' bord ...>" +
                   "<tbody>" +
                      "<tr>" +
                        "header data" +
                      "</tr>"
                      "<tr>" +
                        "<td style='asdasdas' class='asdasdasd' ...>" +
                          names[0] +
                        "</td>" +
                        "<td style='asdasdas' class='asdasdasd' ...>" +
                           names[1] +
                        "</td>" +
                      "</tr>" +
                      "<tr>" +
                        "<td style='asdasdas' class='asdasdasd' ...>" +
                          names[2] +
                        "</td>" +
                        "<td style='asdasdas' class='asdasdasd' ...>" +
                          names[3] +
                        "</td>" +
                      "</tr>" +
                    "</tbody>";

将表对象插入到所需的任何位置。插件可能会很臃肿，对于像这样简单的东西来说可能会过于夸张。但是，如果你有这个选项，我建议你在服务器端而不是在客户端上这样做，因为这将消除对跨浏览器支持的需求，并确保用户不能禁用你闪亮的按字母顺序排序的新表。

我也使用jQuery实现了一个解决方案。看看：

HTML:

<table id="dataTable">
  <tbody>
    <tr>
      <td class="firstName">
        foo
      </td>
      <td class="lastName">
        bar
      </td>
    </tr>
    <tr>
      <td class="firstName">
        rob
      </td>
      <td class="lastName">
        mike
      </td>
    </tr>
    <tr>
      <td class="firstName">
        chuck
      </td>
      <td class="lastName">
        norris
      </td>
    </tr>
  </tbody>
</table>
<input id="sortByFirstName" type="button" value="Sort By First Name"/>
<br/>
<input id="sortByLastName" type="button" value="Sort By Last Name"/>

JavaScript:

function sortByCellValue( tableId, sortBy ) {
    var rows = $( "#" + tableId + " tbody tr" );
    var structuredRows = [];
    // extract all row data
    rows.each(function( index, item ) {
        var data = $(item).children().filter("td[class='" + sortBy + "']").html().trim();
        structuredRows.push({
            useToSort: data,
            row: item
        });
    });
    // sorting the rows
    structuredRows.sort(function( a, b ){
        var va = a.useToSort;
        var vb = b.useToSort;
        if ( va < vb ) {
            return -1;
        } else if ( va > vb ) {
            return 1;
        } else {
            return 0;
        }
    });
    // cleaning the tbody and inserting the rows in order
    var tBody = $( "#" + tableId + " tbody" );
    tBody.html( "" );
    for ( var i in structuredRows ) {
        tBody.append( structuredRows[i].row );
    }    
}
$(function(){
    $( "#sortByFirstName" ).click( function(){
        sortByCellValue( "dataTable", "firstName" );
    });
    $( "#sortByLastName" ).click( function(){
        sortByCellValue( "dataTable", "lastName" );
    });
});

jsFiddle可以在这里看到：http://jsfiddle.net/UTTz8/

我不想手动做这件事，因为有插件可用于您尝试做的事情。其中一些插件已被证明工作良好，并得到了良好的支持。我只想使用这个