js中表格内容排序

JavaScript07

js中表格内容排序,第1张

tr[b].cells[c].innerHTML=td[b].parentNode.cells[c].innerHTML

这一段代码他是使用的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>