JS表格排序美化版

zwt2001267

<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 += ' <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 += ' <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(/ <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>