<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Cities</title>
</head>
<body>
<table id="tableTest">
<thead>
<th>id</th><th>name</th>
</thead>
<tbody>
<tr><td>100</td><td>b</td></tr>
<tr><td>400</td><td>d</td></tr>
<tr><td>50</td><td>a</td></tr>
<tr><td>200</td><td>c</td></tr>
</tbody>
</table>
<button id="btn">排序</button>
<script>
window.onload = function() {
var oTable=document.getElementById("tableTest");
var oTbody=oTable.tBodies[0];
var arr=[];
var oBtn=document.getElementById("btn");
flag=true;
oBtn.onclick=function(){
for(var i=0;i<oTbody.rows.length;i++){
arr.push(oTbody.rows[i]);
oTbody.rows[i].cells[1]=1000;
}
arr.sort(function(tr1,tr2){
if(flag){
return tr1.cells[0].innerHTML-tr2.cells[0].innerHTML;
}else{
return tr2.cells[0].innerHTML-tr1.cells[0].innerHTML;
}
})
var fragment=document.createDocumentFragment();
for(var i=0;i<arr.length;i++){
oTbody.appendChild(arr[i]);
}
oTbody.appendChild(fragment); /*appendChild有一个属性:如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.*/
flag=!flag;
}
}
</script>
</body>
</html>
时间： 2024-10-17 01:20:58