<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>
使用for循环，里面使用if else语句。网上有很多实例比如 function sortAge(){//对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序var tabNode = document.getElementById(tabid) var rows0 = tabNode.rows var rows1 = [] //现将元素拷贝一份出来， 第一行不用排序for (var x = 1x <rows0.lengthx++) {rows1[x - 1] = rows0[x] }for (var x = 0x <rows1.length - 1x++) {//每个元素是行对象for (var y = x + 1y <rows1.lengthy++) {//对每一行的内容进行解析成数字if (parseInt(rows1[x].cells[1].innerHTML) >parseInt(rows1[y].cells[1].innerHTML)) {//alert(aa=+x+:+rows1[x].cells[1].innerHTML) //alert(bb+rows1[y].cells[1].innerHTML) var temp = rows1[x] rows1[x] = rows1[y] rows1[y] = temp }}} /* 点击之后排序，排序之后恢复之前的状态 if (flag){ for (var x = 0x <rows1.lengthx++) {// tabNode.childNodes[0].appendChild(rows[x])//方法一： 不一定兼容rows1[x].parentNode.appendChild(rows1[x]) }}else{ for (var x = 1x <rows0.lengthx++) {// tabNode.childNodes[0].appendChild(rows[x])//方法一： 不一定兼容rows0[x].parentNode.appendChild(rows0[x]) }}flag=!flag*//* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/var ageimg=document.getElementById(ageid)if (flag) {for (var x = 0x <rows1.lengthx++) {//排好序之后就从0开始// tabNode.childNodes[0].appendChild(rows[x])//方法一： 不一定兼容rows1[x].parentNode.appendChild(rows1[x]) }ageimg.innerHTML=年龄▲//设置上面的图标 }else{for (var x = rows1.length-1x >=0x--) {// tabNode.childNodes[0].appendChild(rows[x])//方法一： 不一定兼容rows1[x].parentNode.appendChild(rows1[x]) }ageimg.innerHTML=年龄▼}flag=!flag loading()//排序之后还要对颜色重新设置 }表格中数据的排列方式有两种：左右排列（水平对齐），上下排列（垂直对齐）。
左右排列是以ALIGN属性来设置；
上下排列则由VALIGN属性来设置。
其中左右排列的位置可分为三种：
居左（left)、居右(right)和居中(center)；
#=left, center, right
左右排列（水平对齐）代码示例：
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD align=center>内容居中对齐</TD></TR>
<TR><TD style="text-align:center">内容居中对齐：css语法</TD></TR>
</TABLE>
上下排列基本上比较常用的有四种：
上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)
#=top，middle，bottom，baseline
上下排列（垂直对齐）代码示例：
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD VALIGN=TOP>内容顶部对齐</TD></TR> <TR><TD style="vertical-align:top">内容顶部对齐：css语法</TD></TR> </TABLE>
