JS table sorting

//1. Look up the form <th> Elements , Make them clickable 
function makeSortable(table) {
    
    var headers = document.getElementsByTagName("th");
    for (var i = 1; i < headers.length; i++) {
      //1-1. Traverse line header 
        (function (n) {
    
            var flag = false;
            headers[n].onclick = function () {
      //1-2 If a line header is clicked 
                //1-3. Get the sort of data in the table 
                // sortrows(table,n);
                // console.log(headers[n])
                var tbody = document.getElementsByTagName("tbody")[0];// obtain <tbody> first 
                // console.log(tbody)
                var rows = tbody.getElementsByTagName("tr");//  obtain tbody All rows in 
                // var rows = $('#tb').bootstrapTable('getData');
                rows = Array.prototype.slice.call(rows, 0);// Snapshot in real array -- All right rows Convert tags in to array format 

                // Based on the first n individual <td> The value of the element sorts the rows 
                rows.sort(function (row1, row2) {
    
                    var cell1 = row1.getElementsByTagName("td")[n];// For the first n A cell 
                    var cell2 = row2.getElementsByTagName("td")[n];
                    console.log("rows",rows,"row1-2",row1,row2,"cell1-2",cell1,cell2)
                    var val1 = cell1.textContent || cell1.innerText;// Get text content 
                    var val2 = cell2.textContent || cell2.innerText;
                    if (!isNaN(parseFloat(val1))) {
    
                        //parseFloat()  Judge whether it is a number character by character , If the first is not a return NaN(Not a Number)
                        //  Otherwise, return the number up to the end or before the non numeric position , And change the type to numeric type 
                        val1 = parseFloat(val1);
                    }
                    if (!isNaN(parseFloat(val2))) {
    
                        val2 = parseFloat(val2);
                    }
                    if (val1 < val2) {
    
                        return -1;
                    } else if (val1 > val2) {
    
                        return 1;
                    } else {
    
                        return 0;
                    }
                });

                var ielm = headers[n].getElementsByTagName("i")[0]  // 1-4. The top and bottom labels of the line are changed 
                if (flag) {
    
                    $(ielm).removeClass("glyphicon glyphicon-chevron-up pull-right");
                    $(ielm).addClass("glyphicon glyphicon-chevron-down pull-right");  // toggleClass If there is, remove , Add if not 
                    rows.reverse();  // Click again to call rows
                } else {
    
                    $(ielm).removeClass("glyphicon glyphicon-chevron-down pull-right");
                    $(ielm).addClass("glyphicon glyphicon-chevron-up pull-right");
                }

                //1-5. stay tbody Add rows to the end in their order 
                // This will automatically remove them from their current position , So there is no need to delete them in advance 
                // If <tbody> It also includes <tr> Any other element of , These nodes will float to the top position 
                for (var j = 0; j < rows.length; j++) {
    
                    tbody.appendChild(rows[j]);
                }
                //2-1. Table alternate color 
                var tab = document.getElementById("tb");
                var len = tab.tBodies[0].rows.length;
                for (var k = 0; k < len; k++) {
    
                    if (k % 2 === 0) {
    
                        tab.tBodies[0].rows[k].style.backgroundColor = "rgba(255,255,255,0.52)";
                    } else {
    
                        tab.tBodies[0].rows[k].style.backgroundColor = "rgba(218,217,217,0.2)";
                    }
                }
                flag = !flag;
            }
        }(i));
    }
}

window.onload = function () {
    
    var table = document.getElementsByTagName("table")[0];
    makeSortable(table);
    //3-1. Select all button 
    var all_c = document.getElementById("all")
    var checke = document.getElementsByClassName("c")
    all_c.onchange = function () {
    
        for (var i = 0; i < checke.length; i++) {
    
            checke[i].checked = all_c.checked
        }
    }
}

The reference is reprinted by other leaders Code , Then on this basis, I found parseFloat(), It optimizes the small defect that the original numeric type is compared as string type

In addition, you can see