JS表格排序

//1.查找表格的<th>元素，让它们可单击
function makeSortable(table) {
    var headers = document.getElementsByTagName("th");
    for (var i = 1; i < headers.length; i++) {  //1-1.遍历行头
        (function (n) {
            var flag = false;
            headers[n].onclick = function () {  //1-2若某行头被点击
                //1-3.获取表中数据排序
                // sortrows(table,n);
                // console.log(headers[n])
                var tbody = document.getElementsByTagName("tbody")[0];//获取<tbody>第一个
                // console.log(tbody)
                var rows = tbody.getElementsByTagName("tr");// 获取tbody中的所有行
                // var rows = $('#tb').bootstrapTable('getData');
                rows = Array.prototype.slice.call(rows, 0);//真实数组中的快照--所有行rows中标签转为数组格式

                //基于第n个<td>元素的值对行排序
                rows.sort(function (row1, row2) {
                    var cell1 = row1.getElementsByTagName("td")[n];//获得第n个单元格
                    var cell2 = row2.getElementsByTagName("td")[n];
                    console.log("rows",rows,"row1-2",row1,row2,"cell1-2",cell1,cell2)
                    var val1 = cell1.textContent || cell1.innerText;//获得文本内容
                    var val2 = cell2.textContent || cell2.innerText;
                    if (!isNaN(parseFloat(val1))) {
                        //parseFloat() 逐字符判断是否为数字,若第一个不是返回NaN(Not a Number)
                        // 否则返回直到末尾或非数字位置前的数字,并将类型改为数字类型
                        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.行头上下标签更改
                if (flag) {
                    $(ielm).removeClass("glyphicon glyphicon-chevron-up pull-right");
                    $(ielm).addClass("glyphicon glyphicon-chevron-down pull-right");  // toggleClass存在则移除，不存在则添加
                    rows.reverse();  //再次点击时方便调用rows
                } else {
                    $(ielm).removeClass("glyphicon glyphicon-chevron-down pull-right");
                    $(ielm).addClass("glyphicon glyphicon-chevron-up pull-right");
                }

                //1-5.在tbody中按它们的顺序把行添加到最后
                //这将自动把它们从当前位置移走，故没必要预先删除它们
                //如果<tbody>还包含了除了<tr>的任何其他元素，这些节点将会悬浮到顶部位置
                for (var j = 0; j < rows.length; j++) {
                    tbody.appendChild(rows[j]);
                }
                //2-1.表格隔行换色
                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.全选按钮
    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
        }
    }
}

借鉴的是别的大佬转载的代码，然后在这基础上找到了parseFloat(),对原来数值类型被当作字符串类型比较的小缺陷进行了优化

另外可以看看