js实现表格排序(兼容各浏览器)

本来表格排序已经写完了,webkit下已经完美呈现,可.....坑爹的 IE ,唉我去了,愣是调了一下午,所以想粘出来给大家瞅瞅,大神请无视....

function sortrows(Table,n){                             //参数Table是通过getElementById()获取的表格对象,参数 n 代表按照表格第几列内容排序  
	var rows = Table.getElementsByTagName("tr");  
	//rows = Array.prototype.slice.call(rows,1);         IE 不兼容,故删之用下面的代替  
	var k = rows.length;  
	try{
		rows = Array.prototype.slice.call(rows);
	}
	catch(e){
		var ret = [];
		while(k){
			ret[--k] = rows[k];      					//Clone数组
		}
		rows = ret;
	}                          							//至此 已将类数组对象转换成了数组对象 
	rows = rows.splice(1,rows.length);             		//去掉表格第一行,因为可能是标题字段等不参与排序 
	rows.sort(function (row1,row2){            			//js排序函数,具体用法可以百度一下
		var cell1 = row1.getElementsByTagName("td")[n];  
		var cell2 = row2.getElementsByTagName("td")[n];
		var val1 = cell1.innerHTML;          			//如果有需要可以考虑textContent及innerText方法  
		var val2 = cell2.innerHTML; 
		return val1.localeCompare(val2);         		//按汉语拼音排序,可自定义 ^_^  
	});
	
	Table = document.getElementsByTagName("tbody")[0];  //上网查的兼容IE的table.appendChild代码 ,即:ie中表格不能直接用appendChil方法  
	for(var i=0;i<rows.length;i++){
		Table.appendChild(rows[i]);
	}
}

好了,函数写完了,看看怎么调用吧

将表格设置 ID 如:<table id="t_table">……</table>

简单起见,为排序按钮配置响应时间,当然也可以用document.getElementById("t_table").getElementsByTagName("tr")[0].getElementsByTagName("td")[i].onclick = function () {……}为表格注册事件,选简单的如:

           <td style="cursor:pointer" title="课程排序" οnclick="ownSort(0)">课程</td>
            <td style="cursor:pointer" title="教师排序" οnclick="ownSort(1)">教师</td>
            <td style="cursor:pointer" title="时间排序" οnclick="ownSort(2)">时间</td>
            <td style="cursor:pointer" title="地点排序" οnclick="ownSort(3)">地点</td>
            <td style="cursor:pointer" title="班级排序" οnclick="ownSort(4)">班级</td>

调用上述表格函数:

function ownSort(m)
	{
		var Table = document.getElementById("t_table");
		sortrows(Table,m);
	}


































































评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值