/**
*dom操作表格
*表格内容排序
*/
HTML文件代码
<!DOCTYPE html>
<html>
<head>
<title>domTableOperate.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/domTableOperate.js"></script>
</head>
<body>
<input type="button" value="SORT" id="btn3" style="margin-top:50px;"><br/>
<table border="1" width="500px;" id="tab3">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
<td>OPERATE</td>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>tom</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>22</td>
<td>wsm</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>43</td>
<td>ali</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>14</td>
<td>lisi</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>58</td>
<td>alid</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>62</td>
<td>skd</td>
<td>33</td>
<td></td>
</tr>
<tr>
<td>27</td>
<td>sawm</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>38</td>
<td>tim</td>
<td>20</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
js文件代码
window.onload = function(){
var table3 = document.getElementById('tab3');
var btn3 = document.getElementById('btn3');
btn3.onclick = function(){
var arr = [];
for(var i = 0;i<table3.tBodies[0].rows.length;i++){
arr[i] = table3.tBodies[0].rows[i];
}
arr.sort(function(tr1,tr2){
var n1 = parseInt(tr1.cells[0].innerHTML);
var n2 = parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for(var i= 0;i<arr.length;i++){
table3.tBodies[0].appendChild(arr[i]);
}
}
}