54.js对表格内容排序 document.getElementById("table").rows document.getElementById("table").rows.cells

 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>
posted on 2017-03-04 03:36 Sharpest 阅读(662) 评论(0) 收藏举报