元素進行排序

Question

可能重複：
javascript sort of HTML elements

我需要按此格式

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

我需要能夠訴諸排序元素的列表清單讓人們可以按字母順序排列名稱，我無法理解如何做到這一點

Answer 1

這裏是一個普通的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. 重新插入現在排序順序排序對象，使用PLACEHOLD呃，作爲他們去哪裏指南 - 刪除佔位符它的插槽用於

Answer 2

簡單的方法：在一個JS數組

1. 負載名
2. 排序 JS數組
3. 生成和插入表從陣列

Answer 3

我會不想手動執行此操作，因爲有插件可用於您正在嘗試執行的操作。其中一些被證明工作很好，並支持很好。我只是用this

Answer 4

假設你想只有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>"; 

插入任何你想要的表對象。插件可能會臃腫，並可能會像這樣簡單的東西矯枉過正。但是，如果您有選項，我建議在服務器端而不是客戶端上執行，因爲這樣可以消除對跨瀏覽器支持的需求，並確保用戶無法禁用閃亮的按字母順序排序的新表。

Answer 5

我實現過使用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可以在這裏看到：如果你使用jQuery http://jsfiddle.net/UTTz8/