JS兑现table列排序
日期：2014-05-16 浏览次数：20378 次
JS实现table列排序
<HTML>
<HEAD>
<TITLE>JS实现table列排序</TITLE>
<script>
//调用比较函数
function sortTable(id,rowNum){
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( function(oTR1,oTR2){
var s1 = oTR1.cells[rowNum].firstChild.nodeValue;//比较行的内容的值
var s2 = oTR2.cells[rowNum].firstChild.nodeValue;//比较行的内容的值
return parseInt(s1)-parseInt(s2);//进行比较
});//对数组进行比较,是通过新的数组的行比较
var otemp = document.createDocumentFragment();//创建文档碎片
for (var i = 0;i<aTRs.length ;i++ ){
otemp.appendChild(aTRs[i]);//分别将每行加入到文档碎片中
}
oTbody.appendChild(otemp);//将文档碎片添加到文档中
}
</script>
</HEAD>
<BODY>
<table id="t" >
<thead>
<tr>
<button onclick = "sortTable('t',0);">按照第一列排序</button>
<button onclick = "sortTable('t',1);">按照第二列排序</button>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>1</td></tr>
<tr><td>10</td><td>6</td></tr>
<tr><td>3</td><td>5</td></tr>
<tr><td>5</td><td>4</td></tr>
<tr><td>2</td><td>3</td></tr>
<tr><td>9</td><td>9</td></tr>
</tbody>
</BODY>
</HTML>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
