如何使用 javascript 按列对表进行排序？不能在这里使用 jquery。我正在使用javascript从xml文件加载表

Question

<div id="banner1"; class="float1">
<form>
<select id="mySelect" onchange="myFunction()">
<option value="noOption">Select a table to view</option>
<option value="StudentHistory">StudentHistory</option>
</select>
<br><br>
</form>

使用 javascript 选择选项将打开学生历史记录表。 如何在表上运行脚本，该脚本加载以按字母或数字顺序对表的列进行排序。

<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp= new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","file:///C:/Users/Jordan/Documents/development/data0001.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 


function myFunction() {
    var x = document.getElementById("mySelect").value;
//  document.getElementById("demo").innerHTML = "You selected: " +  x ;}
if (x == "noOption") {document.getElementById("test").innerHTML = "Please make a proper selection" ;}
else if (x == "StudentHistory") {
var stable;
stable = "";

stable  +="<table><tr><th>personID</th><th>firstname</th><th>mid</th><th>last</th><th>age</th><th>sex</th></tr>";
var x=xmlDoc.getElementsByTagName("PersonInform");
for (i=0;i<x.length;i++)
  { 
  stable  +="<tr><td>";
  stable  +=x[i].getElementsByTagName("personID")[0].childNodes[0].nodeValue;
  stable  +="</td><td>";
  stable  +=x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
stable  +="</td><td>";
  stable  +=x[i].getElementsByTagName("mid")[0].childNodes[0].nodeValue;
stable  +="</td><td>";
  stable  +=x[i].getElementsByTagName("last")[0].childNodes[0].nodeValue;
  stable  +="</td><td>";
  stable  +=x[i].getElementsByTagName("age")[0].childNodes[0].nodeValue;
stable  +="</td><td>";
stable  +=x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue;
stable  +="</td></tr>";
  }
  document.getElementById("test").innerHTML = stable;
  }
  }
 </script>

稳定的表对象有 6 列，我希望能够按字母顺序排序。 有什么建议吗？不能使用 jquery。 可以使用 JSON 或 JavaScript。

<p id="test" onchange="myFunction()"> </p>
</div>

<div id="footer">

如果您想查看整个代码，请告诉我。谢谢堆栈溢出。

Answer 1

这是一个对表进行排序的普通 JavaScript 函数。 它假定表的第一行包含<th>标记，单击其中一个标记意味着应按该列对表进行排序。 该函数根据列的内容猜测是执行数字排序还是文本排序。 它还跟踪列中的先前排序，如果在同一标题列中多次单击，它将反转排序。

工作演示：http://jsfiddle.net/jfriend00/6Ldxdqbb/

function makeTableSortable(tableSelector) {
    var columnHeaders = document.querySelectorAll(tableSelector + " th");
    for (var i = 0; i < columnHeaders.length; i++) {
        columnHeaders[i].addEventListener("click", function(e) {
            // column header was clicked, get the column number
            var row = closest(this, "tr");
            var headers = Array.prototype.slice.call(row.querySelectorAll("th"));
            var columnNumber = headers.indexOf(this);
            var cells, columnData = [], data, textCnt = 0, numberCnt = 0, parent;
            // now get the data to sort
            var table = closest(this, "table");
            var rows = table.querySelectorAll("tr");
            for (var i = 1; i < rows.length; i++) {
                cells =  rows[i].querySelectorAll("td");
                data = cells[columnNumber].textContent;
                // if it starts with numbers, mark it for numbers
                if (data.match(/^s*d+/)) {
                    data = parseInt(data, 10);
                    ++numberCnt;
                } else if (!data.match(/s*/)) {
                    ++textCnt;
                }
                columnData.push({rowElement: rows[i], rowNum: i, data: data});
            }
            // we now have all columnData and can sort it
            if (numberCnt > textCnt) {
                columnData.sort(function(a, b) {
                    return a.data - b.data;
                });
            } else {
                columnData.sort(function(a, b) {
                    return a.data.localeCompare(b.data);
                });
            }
            // if sorting the same column we last sorted, then reverse the prior
            // sort order
            if (table._lastSortColumn === columnNumber) {
                if (table._lastSortDirection === "increasing") {
                    // reverse our current sort
                    columnData.reverse();
                    table._lastSortDirection = "decreasing";
                } else {
                    table._lastSortDirection = "increasing";
                }
            } else {
                table._lastSortDirection = "increasing";
            }
            table._lastSortColumn = columnNumber;
            // now we have the sorted data and we need to just rearrange the rows into the desired order
            parent = rows[0].parentNode;
            for (i = 0; i < columnData.length; i++) {
                parent.insertBefore(columnData[i].rowElement, null)
            }
        });
    }
    function closest(start, tag) {
        tag = tag.toLowerCase();
        while (start && start !== document.documentElement && start.tagName.toLowerCase() !== tag) {
            start = start.parentNode;
        }
        return start;
    }
}