这一段代码他是使用的html对象。当循环后会出现某些td的parent对象已经被更改了,因此会出现这种情况。
建议将排序后的数组的innerHTML存放到临时变量里面,再进行循环对td、tr赋值即可。
下面是js代码。赶紧给分吧,呵呵
<script language="javascript">
var tr=new Array()//表格中所有行的集合
var td=new Array()//表格中指定列的集会
var a
function px_zm(zhi){ //按某列的值进行行的排序
var tbody=$("tbody")
for(var i=0i<tbody.rows.lengthi++)
{
tr[i]=tbody.rows[i]
td[i]=tr[i].cells[zhi]
}
for(var i=0i<td.lengthi++)
{
for(j=ij<td.lengthj++)
{
if(td[i].innerHTML<td[j].innerHTML)
{
a=td[i]
td[i]=td[j]
td[j]=a
}
}
}
var trTempArray = new Array()
for(var b=0b<4b++){
var tdTempArray = new Array()
for(var c=0c<4c++){
// 将一行的td内容保存到tdTempArray当中。
tdTempArray[c] = td[b].parentNode.cells[c].innerHTML
}
// 将一行内容保存到trTempArray。
trTempArray[b] = tdTempArray
}
// 循环对表格内容重新赋值
for(var b=0b<4b++)
{
for(var c=0c<4c++){
tr[b].cells[c].innerHTML=trTempArray[b][c]
}
}
}
function $(id){
return document.getElementById(id)
}
</script>
<!DOCTYPE HTML><html>
<head>
<meta charset="UTF-8" />
<title>main.html</title>
<style type="text/css">
table {
width: 300pxborder : 1px solid black
border-collapse: collapse
border: 1px solid black
}
td {
border: 1px solid black
}
</style>
<script type="text/javascript">
function paiXu ()
{
var tabNode = document.getElementsByTagName ("table")[0]
var trs = tabNode.rows
var arr = new Array
for ( var x = 0x <trs.lengthx++)
{
arr.push (trs[x])
}
sortt (arr)
for ( var x = 0x <arr.lengthx++)
{
tabNode.tBodies[0].appendChild (arr[x])
}
}
function sortt (arr)
{
for ( var x = 0x <arr.lengthx++)
{
for ( var y = x + 1y <arr.lengthy++)
{
if (parseInt (arr[x].cells[1].childNodes[0].nodeValue) <= parseInt (arr[y].cells[1].childNodes[0].nodeValue))
{
var tmp = arr[x]
arr[x] = arr[y]
arr[y] = tmp
}
}
}
}
</script>
</head>
<body>
<input type="button" value="排序" onclick="paiXu()">
<table>
<tr>
<td>小明</td>
<td>23</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小花</td>
<td>21</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小高</td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小林</td>
<td>25</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小王</td>
<td>35</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>