1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <title>tree</title> 7 <meta name="designer" content="csdn design team - meizz" /> 8 </head> 9 <style> 10 body{ 11 FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; 12 } 13 input { 14 FONT-SIZE: 9pt; height: 15pt; width:50px; cursor: default; 15 } 16 table{ 17 font-size: 9pt; 18 word-break:break-all; 19 cursor: default; 20 BORDER: black 1px solid; 21 background-color:#eeeecc; 22 border-collapse:collapse; 23 border-Color:#999999; 24 align:center; 25 } 26 </style> 27 <script language=javascript> 28 function show() 29 { 30 var temp=new Array() 31 var obj=document.getElementById("table1") //获取当前页的表格 32 //遍历表格子元素的 33 for(var i=0;i<obj.rows.length;i++) 34 { 35 alert(obj.rows[i].cells[1].innerText); 36 //取表格的第三个元素 37 temp[i]=obj.rows[i]; 38 } 39 temp.sort(function(a,b){ 40 return a.cells[2].innerText-b.cells[2].innerText 41 } 42 43 ) //进行排序-自定义排序方法sort 44 for(var i=0;i<temp.length;i++) 45 obj.appendChild(temp[i]) //将排序结果重新添加到表格中 46 } 47 </script> 48 <body> 49 <form name="myForm" method="post" action="/addcontent.jsp"> 50 <table width="60%" border="0" cellspacing="0" cellpadding="0" align="center" id="table1"> 51 <tr> 52 <td width="24%" align="center"><input type="checkbox" name="id" ></td> 53 <td width="56%">用户体验的新技术</td> 54 <td width="20%">3</td> 55 </tr> 56 <tr> 57 <td width="24%" align="center"><input type="checkbox" name="id" ></td> 58 <td width="56%">综合留言板</td> 59 <td width="20%">2</td> 60 </tr> 61 <tr> 62 <td width="24%" align="center"><input type="checkbox" name="id" ></td> 63 <td width="56%">历史资料查询</td> 64 <td width="20%">1</td> 65 </tr> 66 </table> 67 <input name="button1" type="button" value="排序" onclick=show()> 68 </form> 69 </body> 70 </html>
