自写的JS表格排序

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<title>JS表格排序</title>
<script type="text/javascript">
var tableSort = {};
(function() {
    var oTable = {};
    var cellStatus = {};
    var sortCells = {};
    var limit = {};
    var $ = function(id) {
        return document.getElementById(id);
    }
	var objKeyExists = function(key, search) {
        if (typeof key != 'number' && typeof key != 'string') {
            return false;
        }
        for (k in search) {
            if (k == key) {
                return true;
            }
        }
        return false;
    }
    var _addEvent = function(tableId, cellId) {
        oTable[tableId].rows[0].cells[cellId].onclick = function() {
            tableSort.sort(tableId, cellId);
        }
    }
    var _addStyle = function(tableId, cellId) {
        oTable[tableId].rows[0].cells[cellId].style.cursor = 'pointer';
    }
    var _addTitle = function(tableId, cellId) {
        oTable[tableId].rows[0].cells[cellId].title = '点击排序';
    }
    var _sortTable = function(tableId, cellId) {
        var rows = oTable[tableId].tBodies[0].rows;
        var _rows = [];
        for (var i = 1; i < rows.length; i++) {
            _rows.push(rows[i]);
        }
        var status = -1;
        if (objKeyExists(cellId, cellStatus[tableId])) {
            status = 0 - cellStatus[tableId][cellId];
        }
        cellStatus[tableId][cellId] = status;
        if (status == 1) {
            oTable[tableId].rows[0].cells[cellId].innerHTML += '&nbsp;<span style="font-family:webdings;">5</span>';
            _rows.sort((function(id){
                return function(a, b) {
                    return _sort(a, b, id);
                }
            }(cellId)));
        } else {
            oTable[tableId].rows[0].cells[cellId].innerHTML += '&nbsp;<span style="font-family:webdings;">6</span>';
            _rows.sort((function(id){
                return function(a, b) {
                    return _rsort(a, b, id);
                }
            }(cellId)));
        }
        var oFragment = document.createDocumentFragment();
        for (var i = 0; i < _rows.length; i++) {
            _rows[i].className = i % 2 ? 'tr' : 'tr_spec';
            _rows[i].cells[0].className =  i % 2 ? 'td_spec2' : 'td_spec1';
            if (limit[tableId] > 0) {
                if (i >= limit[tableId]) {
                    _rows[i].style.display = 'none';
                } else {
                    _rows[i].style.display = '';
                }
            }
            oFragment.appendChild(_rows[i]);
        }
        oTable[tableId].tBodies[0].appendChild(oFragment);
    }
    var _cleanStatus = function(tableId, cellId) {
        for(var i = 0; i < sortCells[tableId].length; i++) {
            oTable[tableId].rows[0].cells[sortCells[tableId][i]].innerHTML = oTable[tableId].rows[0].cells[sortCells[tableId][i]].innerHTML.replace(/&nbsp;<span style=\"font-family\: webdings\">[56]<\/span>$/ig, '');
        }
    }
    var _sort = function(a, b, id) {
        var param1 = a.cells[id].innerText;
        var param2 = b.cells[id].innerText;
        param1 = param1.replace(/[^\d.-]/g, '');
        param2 = param2.replace(/[^\d.-]/g, '');
        if (param1 == '-' || param1 == '') {
            return 1;
        }
        if (param2 == '-' || param2 == '') {
            return -1;
        }
        //如果两个参数均为字符串类型
        if (isNaN(param1) && isNaN(param2)){
            return param1.localeCompare(param2);
        }
        //如果参数1为数字，参数2为字符串
        if (!isNaN(param1) && isNaN(param2)){
            return -1;
        }
        //如果参数1为字符串，参数2为数字
        if (isNaN(param1) && !isNaN(param2)){
            return 1;
        }
        //如果两个参数均为数字
        if (!isNaN(param1) && !isNaN(param2)){
            if (Number(param1) > Number(param2)) {
                return 1;
            }
            if (Number(param1) == Number(param2)) {
                return 0;
            }
            if (Number(param1) < Number(param2)) {
                return -1;
            }
        }
        //return a.cells[id].innerText - b.cells[id].innerText;
    }
    var _rsort = function(a, b, id) {
        var param1 = b.cells[id].innerText;
        var param2 = a.cells[id].innerText;
        param1 = param1.replace(/[^\d.-]/g, '');
        param2 = param2.replace(/[^\d.-]/g, '');
        if (param1 == '-' || param1 == '') {
            return -1;
        }
        if (param2 == '-' || param2 == '') {
            return 1;
        }
        //如果两个参数均为字符串类型
        if (isNaN(param1) && isNaN(param2)){
            return param1.localeCompare(param2);
        }
        //如果参数1为数字，参数2为字符串
        if (!isNaN(param1) && isNaN(param2)){
            return -1;
        }
        //如果参数1为字符串，参数2为数字
        if (isNaN(param1) && !isNaN(param2)){
            return 1;
        }
        //如果两个参数均为数字
        if (!isNaN(param1) && !isNaN(param2)){
            if (Number(param1) > Number(param2)) {
                return 1;
            }
            if (Number(param1) == Number(param2)) {
                return 0;
            }
            if (Number(param1) < Number(param2)) {
                return -1;
            }
        }
        //return b.cells[id].innerText - a.cells[id].innerText;
    }
    tableSort = {
        init : function(tableId, cells, rows) {
            oTable[tableId] = $(tableId);
            sortCells[tableId] = cells;
            cellStatus[tableId] = {};
            limit[tableId] = rows ? rows : 0;
            for (var i = 0; i < cells.length; i++) {
                _addEvent(tableId, cells[i]);
                _addStyle(tableId, cells[i]);
                _addTitle(tableId, cells[i]);
            }
            if (rows > 0) {
                for (var i = 1; i < $(tableId).rows.length; i++) {
                    if (i > rows) {
                        $(tableId).rows[i].style.display = 'none';
                    }
                }
            }
        },
        sort : function(tableId, cellId) {
            _cleanStatus(tableId, cellId);
            _sortTable(tableId, cellId);
        }
    }
})();
</script>
<style type="text/css">
*{font-size:12px;}
</style>
<table id="t1" width="400" border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
    <td>第四列</td>
    <td>第五列</td>
  </tr>
  <tr>
    <td>1</td>
    <td>4</td>
    <td>-0.1</td>
    <td>2009-01-01</td>
    <td>-</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
    <td>-0.3</td>
    <td>2008-01-01</td>
    <td>-</td>
  </tr>
  <tr>
    <td>3</td>
    <td>2</td>
    <td>4</td>
    <td>2008-03-01</td>
    <td>-</td>
  </tr>
  <tr>
    <td>4</td>
    <td>1</td>
    <td>-0.1</td>
    <td>2009-02-01</td>
    <td>-</td>
  </tr>
</table>
<br />
<table id="t2" width="400" border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
    <td>第四列</td>
    <td>第五列</td>
  </tr>
  <tr>
    <td>1</td>
    <td>4</td>
    <td>-0.1</td>
    <td>2009-01-01</td>
    <td>-</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
    <td>-0.3</td>
    <td>2008-01-01</td>
    <td>-</td>
  </tr>
  <tr>
    <td>3</td>
    <td>2</td>
    <td>4</td>
    <td>2008-03-01</td>
    <td>-</td>
  </tr>
  <tr>
    <td>4</td>
    <td>1</td>
    <td>-0.1</td>
    <td>2009-02-01</td>
    <td>-</td>
  </tr>
</table>
<script type="text/javascript">
tableSort.init('t1', [0, 1, 2, 3]);
tableSort.init('t2', [0, 1, 2, 3], 2);
</script>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

自写的JS表格排序

分类

表格图层

描述

自写的JS表格排序，目前仅支持数字排序，其他的可以扩展sort和配置来实现，并且目前只支持单行表头，欢迎一起交流。