使用Javascript排序表格

Question

我有以下代碼使用Javascript排序表格。我想要做的是使總表的最後一行，因此需要附加我的代碼來刪除排序的最後一行。我對這項任務有麻煩。

var TableSort = function (tableId) { 
    var that = this; 

    // Store a reference to the table node as a property 
    this.table = document.getElementById(tableId); 

    // Validate the table node 
    if (this.table && this.table.nodeType != 1) { 
     throw new Error("TableSort: Table id is not a DOM element."); 
    } 
    if (this.table.tagName != "TABLE") { 
     throw new Error("TableSort: Table id is not a table element."); 
    } 

    // Set three global properties 
    this.sortColumn = ""; 
    this.sortUp = true; 
    this.imageNodes = []; 


    // Get the header nodes 
    var headers = this.table.getElementsByTagName("th"); 

    // Loop through the header nodes 
    var header, columnName, imageNode, imageClick; 
    for (var i = 0; i < headers.length; i++) { 
     header = headers[i]; 

     // Create a node for the image 
     imageNode = document.createElement("img"); 

     // Add the "sort arrow" images to the header column 
     // And set the first column as the default sort column 
     columnName = header.className; 
     if (i == 0) { 
      this.sortColumn = columnName; 
      imageNode.src = "arrows_up.png"; 
     } else { 
      imageNode.src = "arrows_off.png"; 
     } 

     // Get the event handler for the image 
     imageClick = this.imageClickHandler(columnName); 

     // Add the event handler to the image 
     jsLib.event.add(imageNode, "click", imageClick); 

     // Add the image node to column header and to array of image nodes 
     header.appendChild(imageNode); 
     this.imageNodes[columnName] = imageNode; 
    } 

    // Sort the table 
    this.sort(); 
} 

TableSort.prototype.imageClickHandler = function (columnName) { 
    var that = this; 

    // return an event handler 
    return function() { 
     // If current sort column, toggle the sort direction 
     if (that.sortColumn == columnName) { 
      that.sortUp = ! that.sortUp; 
     // Otherwise... 
     } else { 
      // Set the image for the old sort column 
      that.imageNodes[that.sortColumn].src = "arrows_off.png"; 

      // Switch the current sort column and sort ascending 
      that.sortColumn = columnName; 
      that.sortUp = true; 
     } 

     // Set the appropriate arrows for the current sort column 
     if (that.sortUp) { 
      that.imageNodes[that.sortColumn].src = "arrows_up.png"; 
     } else { 
      that.imageNodes[that.sortColumn].src = "arrows_down.png"; 
     } 

     that.sort(); 
    } 
} 

TableSort.prototype.sort = function() { 
    var that = this; 
    if (this.sortColumn == "") return; 

    // Get the rows from the table 
    var rowNodes = this.table.getElementsByTagName("tr"); 
    if (rowNodes.length <= 1) return; 

    // Store a reference to each row in the rows array 
    var rows = []; 
    for (var i = 0; i < rowNodes.length; i++) { 
     rows.push(rowNodes[i]); 
    } 

    // Get a reference to the tbody node 
    var tbodyNode = rows[0].parentNode; 

    // Remove the header row from the array (but not the DOM) 
    rows.shift(); 



    // Remove all rows except the header row from the DOM 
    var row; 
    for (i = 0; i < (rows.length); i++) { 
     row = rows[i]; 
     row.parentNode.removeChild(row); 
    } 

    // Define two functions that check for data types 
    var isMoney = function (value) { 
     var m = value.replace(/[$,]/g, ""); 
     return ! isNaN(m); 
    } 
    var isDate = function (value) { 
     var d = new Date(value); 
     return ! isNaN(d); 
    } 

    // Define the direction variable 
    var direction = (that.sortUp) ? 1 : -1; 

    // Define the function that compares the rows 
    var compareColumnValues = function (rowA, rowB) { 
     var valueA, valueB; 
     var i, cell; 

     // Get the cell value for row A 
     var cellsA = rowA.getElementsByTagName("td"); 
     for (i = 0; i < cellsA.length; i++) { 
      cell = cellsA[i]; 
      if (cell.className == that.sortColumn) { 
       valueA = cell.firstChild.nodeValue; 
       break; 
      } 
     } 

     // Get the cell value for row B 
     var cellsB = rowB.getElementsByTagName("td"); 
     for (i = 0; i < cellsB.length; i++) { 
      cell = cellsB[i]; 
      if (cell.className == that.sortColumn) { 
       valueB = cell.firstChild.nodeValue; 
       break; 
      } 
     } 

     // Convert the values to the appropriate data type 
     if (! isNaN(valueA) && ! isNaN(valueB)) { 
      valueA = parseFloat(valueA); 
      valueB = parseFloat(valueB); 
     } else if (isDate(valueA) && isDate(valueB)) { 
      valueA = new Date(valueA); 
      valueB = new Date(valueB); 
     } else if (isMoney(valueA) && isMoney(valueB)) { 
      valueA = parseFloat(valueA.replace(/[$,]/g, "")); 
      valueB = parseFloat(valueB.replace(/[$,]/g, "")); 
     } 

     // Compare the two values and return the appropriate comparison value 
     if (valueA < valueB) { 
      return -1 * direction; 
     } else if (valueB < valueA) { 
      return 1 * direction; 
     } else { 
      return 0; 
     } 
    } 

    // Use the compareColumnValues function to sort the rows array 
    rows.sort(compareColumnValues); 

    // Add all rows back to the DOM 
    for (i = 0; i < rows.length; i++) { 
     tbodyNode.appendChild(rows[i]); 
    } 
} 

Answer 1

你可以在你的HTML標記中使用更多的結構來幫助你的代碼找出可以排序的東西。

將總計行放入tfoot元素中，並將排序行放入tbody元素中...現在您可以將排序行定位到

var sortableRows = this.table.getElementsByTagName('tbody'), 
    rowNodes = sortableRows.getElementsByTagName('tr'); 

更新：既然你不能改變的標記，從您的排序數組中刪除最後一排，並將它緩存。

... 
// Remove the header row from the array (but not the DOM) 
rows.shift(); 
// And now we remove the footer row and cache it 
var footerRow = rows.pop(); 

，然後修改代碼中使用insertBefore

... 
// Add all rows back to the DOM, before the footer row 
for (i = 0; i < rows.length; i++) { 
    tbodyNode.insertBefore(rows[i], footerRow); 
} 

這個循環實際上是一個有點性能問題來排序行寫回DOM，因爲你正在做的多次寫入到DOM。這將是最好編寫所有這些分類節點到documentFragment，只是寫DOM一次，具體如下：

... 
var sortedFragment = document.createDocumentFragment(); 

// Write all the sorted rows to a fragment 
for (i = 0; i < rows.length; i++) { 
    sortedFragment.appendChild(rows[i]); 
} 

// Insert fragment containing sorted rows before footer 
tbodyNode.insertBefore(sortedFragment, footerRow); 

Answer 2

我找到了一個很好的解決方案，我居然在代碼中使用了我的工作！我不能把它的信用不過，但我只是想指出你們都在朝着正確的方向：

http://www.kryogenix.org/code/browser/sorttable/

「1.下載JavaScript庫的位置：http://www.kryogenix.org/code/browser/sorttable/sorttable.js

2。包括JavaScript庫，通過把一個鏈接到它在你的頁面的頭，像這樣：

3.Mark你的表作爲一個排序給予它的「排序」一類：

請注意，庫的JavaScript文件稱爲sorttable（兩個Ts），但添加到表中的類是可排序的（一個T）。「

設置非常簡單，應該允許升序和降序排序。如果您有任何問題，請告訴我。

謝謝！保羅