javascript实现table列排序
通过javascript的localeCompare来进行排序判断判断,这里举例是对1列的table进行排序.
查看效果:javascript实现table列排序
建立方法管理容器
var forasp = new Object;
首先看判断函数
forasp.bijiao = function(oTR1,oTR2)
{
var s1 = oTR1.cells[0].firstChild.nodeValue;//比较行的内容的值
var s2 = oTR2.cells[0].firstChild.nodeValue;//比较行的内容的值
return s1.localeCompare(s2);//进行比较
}
调用比较函数
forasp.sortTable = function(id)
{
var oTable = document.getElementById(id);//获取以id为id的table对象
var oTbody = oTable.tBodies[0];//获取第一个tBody
var oRows = oTbody.rows;//获取tBody的所有的行
var aTRs = new Array;//新建一个数组
for (var i=0;i < oRows.length ;i++ )
{
aTRs[i] = oRows[i];//循环将所有行换到新的数组
}
aTRs.sort(forasp.bijiao);//对数组进行比较,是通过新的数组的行比较
原载于:http://www.forasp.cn/
var otemp = document.createDocumentFragment();//创建文档碎片
for (var i = 0;i<aTRs.length ;i++ )
{
otemp.appendChild(aTRs[i]);//分别将每行加入到文档碎片中
}
oTbody.appendChild(otemp);//将文档碎片添加到文档中
}
-->
接下来是页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>javascript获取按键值-网站制作学习网</TITLE>
在这里插入代码
</HEAD>
<BODY>
<table id="forasp_cn" >
<thead>
<tr>
<th onclick = "forasp.sortTable('forasp_cn');">排序</th>
</tr>
</thead>
<tbody>原载于:http://www.forasp.cn/
<tr><td>w</td></tr>
<tr><td>w</td></tr>
<tr><td>w</td></tr>
<tr><td>f</td></tr>
<tr><td>o</td></tr>
<tr><td>r</td></tr>
<tr><td>a</td></tr>
<tr><td>s</td></tr>
<tr><td>p</td></tr>
<tr><td>c</td></tr>
<tr><td>n</td></tr>
</tbody>
</BODY>
</HTML>
完毕,看看你懂了么,这是通过javascript的localepare对table内容进行排序,