html - How can i use javascript to sort the tables by column? Can not use jquery here. I'm using javascript to load a table from an xml file -

<div id="banner1"; class="float1"> <form> <select id="myselect" onchange="myfunction()"> <option value="nooption">select table view</option> <option value="studenthistory">studenthistory</option> </select> <br><br> </form> 

using javascript select option opens student history table. how run script on table loads sort columns of table alphabetically or numerically.

<script> if (window.xmlhttprequest)   {// code ie7+, firefox, chrome, opera, safari   xmlhttp= new xmlhttprequest();   } else   {// code 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 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"); (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> 

the stable table object has 6 columns able sort alphabetically. suggestions? can't use jquery. can use json or javascript.

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

let me know if you' see whole code. thank stackoverflow.

here's plain javascript function sorts table. assumes first row of table contains <th> tags , clicking on 1 of means table should sorted column. function guesses whether numeric or text sort based on content of columns. keeps track of previous sort in column , if clicking multiple times in same header column, reverse sort.

working demo: http://jsfiddle.net/jfriend00/6ldxdqbb/

function maketablesortable(tableselector) {     var columnheaders = document.queryselectorall(tableselector + " th");     (var = 0; < columnheaders.length; i++) {         columnheaders[i].addeventlistener("click", function(e) {             // column header clicked, 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;              // data sort             var table = closest(this, "table");             var rows = table.queryselectorall("tr");             (var = 1; < rows.length; i++) {                 cells =  rows[i].queryselectorall("td");                 data = cells[columnnumber].textcontent;                 // if starts numbers, mark 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});             }             // have columndata , can sort             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 same column last sorted, reverse 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;             // have sorted data , need rearrange rows desired order             parent = rows[0].parentnode;             (i = 0; < 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;     } }