单列表格的例子完毕, 很简单不是吗? 但是在实际应用中, 很少会遇到单列表格吧... 那我们也要进一步了.

多列表格排序

<table cellspacing="0" id="needSort" class="needSort">
    <caption>User End Design</caption>
    <thead>
        <tr>
            <th scope="col">Type</th>
            <th scope="col">Editor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Graphic Design</td>
            <td>Photoshop</td>
        </tr>
        <tr>
            <td>(X)HTML</td>
            <td>DreamWeaver</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>StyleTop</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>EditPlus</td>
        </tr>
    </tbody>
</table>

 之前的比较函数限制较多, 现在通过传递参数的方法打开限制.

function generateCompare(ind){
    return function comparison(tr1, tr2){
        var value1= tr1.cells[ind].firstChild.nodeValue;
        var value2= tr2.cells[ind].firstChild.nodeValue;
        return value1.localeCompare(value2);
    }
}

这样就能对任意列的数据进行比较了. 只需要一个表列的索引即可.

恩,构建一个无侵入的脚本吧.

var _table = document.getElementsByTagName("table");
for(var i=0;i<_table.length;i++){
    if(_table[i].className){
        if(_table[i].className=="needSort"){
            var _thead = _table[i].getElementsByTagName("thead")[0];
            var _tr = _thead.rows[0];
            var _th = _tr.cells;
            for(var j=0;j<_th.length;j++){
                _th[j].onclick = tableSort;
            }
        }
    }
}

所有定义了 class="needSort" 的table都可以调用这段代码了.

我们再来看tableSort 这个函数:

function tableSort(ev){
    var ev = ev || window.event;
    var _target = ev.target || ev.srcElement;
    var _parent = _target.parentNode;
    var _children = new Array();
    var _tableCur = _parent.parentNode.parentNode;
    var _tbody = _tableCur.tBodies[0];
    var _cellGrids;
    for(var i=0;i<_parent.childNodes.length;i++){
         if(_parent.childNodes[i].nodeType=="1"){
             _children.push(_parent.childNodes[i]);
         }
    }
    for(var i=0;i<_children.length;i++){
        if(_target==_children[i]){
            _cellGrids = getColumnArray(i,_tableCur);
            var _fragment = document.createDocumentFragment();
            for(var j=0;j<_cellGrids.length;j++){
                _fragment.appendChild(_cellGrids[j])
            }
            _tbody.appendChild(_fragment)
        }else{
            continue;
        }
    }
}

标识出2块代码段, 这两块代码段都是为兼容IE和Firefox准备的, Firefox中没有window.event事件, IE中没有把硬回车算成一个节点. Firefox和IE的兼容问题...有空再整理. 这里就先带过了.

其中我把组成列数组的部分单独提出来作为一个函数, 只是为了看上去清楚一点...

function getColumnArray(ind,tab){
    var _tbody = tab.tBodies[0];
    var dataGrids = _tbody.rows;
    var _trow = new Array();
    for(var i=0; i<dataGrids.length; i++){
        _trow.push(dataGrids[i]);
    }
    _trow.sort(generateCompare(ind));
    return _trow;
}

 这样一个多列表格的排序也完成了. 唔, 离我们的目标更近了一步.

倒序排列

这部分就非常简单了, 只要用到Array对象的reverse()方法就基本搞定了.

修改过的函数有2个:

function getColumnArray(ind,tab,obj){
    var _tbody = tab.tBodies[0];
    var dataGrids = _tbody.rows;
    var _trow = new Array();
    for(var i=0; i<dataGrids.length; i++){
        _trow.push(dataGrids[i]);
    }
    if(obj.sortType && obj.sortType=="asc"){
        _trow.reverse();
    }else{
        _trow.sort(generateCompare(ind))
    }
    return _trow;
}

function tableSort(ev){
    var ev = ev || window.event;
    var _target = ev.target || ev.srcElement;
    var _parent = _target.parentNode;
    var _children = new Array();
    var _tableCur = _parent.parentNode.parentNode;
    var _tbody = _tableCur.tBodies[0];
    var _cellGrids;
    for(var i=0;i<_parent.childNodes.length;i++){
        if(_parent.childNodes[i].nodeType=="1"){
            _children.push(_parent.childNodes[i]);
        }
    }
    for(var i=0;i<_children.length;i++){
        if(_target==_children[i]){
            _cellGrids = getColumnArray(i,_tableCur,_target);
            var _fragment = document.createDocumentFragment();
            for(var j=0;j<_cellGrids.length;j++){
                _fragment.appendChild(_cellGrids[j]);
            }
            _tbody.appendChild(_fragment);
            _target.sortType = "asc";
        }else{
            continue;
        }
    }
}

通过给触发排序的元素th增加一个sortType的属性来标识其是否已经经过排序, 关键字可以随便取...反正是字符串.能匹配上就成.

然后在生成数组并排序的地方进行判断, 已经排序的就用倒序呈现, 没有经过排序的, 就进行正常排序.

还真是方便啊