对javascript的元素进行排序

可能重复：

我需要按这种格式对元素列表进行排序

<table width='a number' bord ...>
  <tbody>
    <tr>
      header data
    </tr>
    <tr>
      <td style='asdasdas' class='asdasdasd' ...>
        rob
      </td
      <td style='asdasdas' class='asdasdasd' ...>
        mike
      </td>
    </tr>
    <tr>
      <td style='asdasdas' class='asdasdasd' ...>
        chuck
      </td>
      <td style='asdasdas' class='asdasdasd' ...>
        kev
      </td>
    </tr>
  </tbody>

标题数据
抢劫
简易方法：

在JS数组中加载名称

排序JS数组
从数组生成并插入表

我不想手动执行此操作，因为有插件可用于您尝试执行的操作。其中一些被证明工作良好，并且得到了良好的支持。我只想使用假设您只想使用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>";

var table=“”+
"" +
"" +
“标题数据”+
""
"" +
"" +
姓名[0]+
"" +
"" +
姓名[1]+
"" +
"" +
"" +
"" +
姓名[2]+
"" +
"" +
姓名[3]+
"" +
"" +
"";

在需要的任何位置插入表对象。插件可能会臃肿，对于像这样简单的东西来说可能是杀伤力过大。但是，如果您有选择，我建议您在服务器端而不是在客户端执行此操作，因为这将消除对跨浏览器支持的需要，并确保用户无法禁用新的按字母顺序排序的表。
这里有一个简单的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;
}

函数分类元素（parentId，tagClass）{
var itemsToSort，p=document.getElementById（parentId）；
if（p.getElementsByClassName）{
itemsToSort=p.getElementsByClassName（tagClass）；
}否则{
itemsToSort=getElementsByClassName（标记类，“*”，p）；
}
//将所有数据放入可排序数组中
var数据=[]，订单=[]，项目，占位符，i；
对于（i=0；i对于（var i=0；i我也使用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"/>

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" );
    });
});


福
酒吧
抢劫
迈克
扔出
诺里斯



JavaScript:

<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"/>

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" );
    });
});

函数sortByCellValue（tableId，sortBy）{
变量行=$（“#”+tableId+“tbody tr”）；
var structuredRows=[]；
//提取所有行数据
行。每个（函数（索引、项）{
var data=$（item.children（）.filter（“td[class='”+sortBy+']）html（）.trim（）；
structuredRows.push({
useToSort：数据，
行：项目
});
});
//对行进行排序
structuredRows.sort（函数（a，b）{
var va=a.useToSort；
var vb=b.useToSort；
if（vavb）{
返回1；
}否则{
返回0；
}
});
//清洁车身并按顺序插入行
变量tBody=$（“#”+tableId+“tBody”）；
tBody.html（“”）；
for（structuredRows中的变量i）{
追加（structuredRows[i].row）；
}    
}
$（函数（）{
$（“#sortByFirstName”）。单击（函数（）{
sortByCellValue（“数据表”、“名字”）；
});
$（“#sortByLastName”）。单击（函数（）{
sortByCellValue（“数据表”、“姓氏”）；
});
});

JSFIDLE可以在这里看到：
如果您使用jquery，您可以使用诸如tableSorter或DataTables之类的插件。您尝试了什么？您不明白什么？您搜索过插件/代码吗？如果表是动态更新的，这是一个好主意。否则对于一个简单的问题，这可能只是一个很大的开销。在IE7、IE9、Safari中测试，Firefox，Chrome。在&*^%$IE中发现并修复了一个问题。谢谢，现在的作品非常完美（除了我需要做一些小的修改，因为mines的结构有点不同）嘿，我一直在IE 8中测试，行-data.push（{obj:item，text:strTrim（item.innerHTML）}；-似乎破坏了代码，你能告诉我为什么吗，（我曾尝试在其他地方使用innerHTML，但效果很好，同时切换到innerText也不会解决问题，但我不知道这对您有什么影响。我制作的JSFIDLE演示它在IE8中运行良好，因此可能是您的实现所特有的。