前端技术学习之道：使用js对表格数据排序

柔情只为你懂 2021-09-30 07:00 334阅读 0赞

js实现如下

**\[javascript\]**  [view plain][] [copy][view plain]

1.  // 设置升序还是降序，默认是升序  
2.          **var** flag=**true**;  
3.            
4.          **function** itemSort()\{  
5.                
6.              // 1. 获得表格  
7.              **var** itemTable=document.getElementById("itemsTable");  
8.                
9.              // 2. 通过表格获得tbody  
10.             **var** itemTableBody=itemTable.tBodies\[0\];  
11.               
12.             // 3. 创建空数组  
13.             **var** arrItem=**new** Array()  
14.               
15.             // 4.把数据行拷贝到数组中  
16.             **for**(**var** i=0;i<itemTableBody.rows.length;i++)\{  
17.                   
18.                 arrItem\[i\]=itemTableBody.rows\[i\];  
19.                   
20.             \}  
21.               
22.             // 5.判断是升序还是降序，实现具体的排序功能  
23.             **if**(flag)\{  
24.                   
25.                 arrItem.sort(sortAsc);  
26.                   
27.             \}**else**\{  
28.                   
29.                 arrItem.sort(sortDesc);  
30.                   
31.             \}  
32.               
33.             flag=!flag;  
34.               
35.             // 6. 创建文档碎片，用来保存已经排序之后的数据，以便于提高性能  
36.             **var** df = document.createDocumentFragment();  
37.               
38.             // 7. 把排序好的元素添加到碎片中  
39.               
40.             **for**(**var** i=0;i<arrItem.length;i++)\{  
41.                   
42.                 df.appendChild(arrItem\[i\]);  
43.                   
44.             \}  
45.               
46.             // 8. 把碎片条件并且替换原来的tbody中的数据  
47.               
48.             itemTableBody.appendChild(df)  
49.               
50.               
51.         \}  
52.           
53.         **function** sortAsc(num1,num2)\{  
54.             // 获得制定行的某列的单元格的值  
55.             num1=parseInt(num1.cells\[2\].firstChild.nodeValue);  
56.             num2=parseInt(num2.cells\[2\].firstChild.nodeValue);  
57.               
58.             **if**(num1>num2)\{  
59.                   
60.                 **return** 1;  
61.                   
62.             \}**else** **if**(num1==num2)\{  
63.                   
64.                 **return** 0;  
65.                   
66.             \}**else**\{  
67.                   
68.                 **return** -1;  
69.             \}     
70.         \}  
71.           
72.         **function** sortDesc(num1,num2)\{  
73.               
74.             num1=parseInt(num1.cells\[2\].firstChild.nodeValue);  
75.             num2=parseInt(num2.cells\[2\].firstChild.nodeValue);  
76.               
77.             **if**(num1>num2)\{  
78.                   
79.                 **return** -1;  
80.                   
81.             \}**else** **if**(num1==num2)\{  
82.                   
83.                 **return** 0;  
84.                   
85.             \}**else**\{  
86.                   
87.                 **return** 1;  
88.             \}     
89.         \}

jsp页面主体如下

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****body****>**  
2.          **<**%  
3.              if(session.getAttribute("itemList")!=null)\{  
4.                    
5.                  SimpleDateFormat df=new SimpleDateFormat("yyyy-MM-dd");  
6.                    
7.                  ArrayList**<****Item****>** itemList=(ArrayList**<****Item****>**)session.getAttribute("itemList");  
8.          %**>**  
9.                
10.             **<****table** align="center" border="1" id="itemsTable"**>**  
11.                 **<****caption****>**商品信息**</****caption****>**  
12.                 **<****thead****>**  
13.                     **<****tr****>**  
14.                         **<****th** width="60"**>**编号**</****th****>**  
15.                         **<****th** width="130"**>**名称**</****th****>**  
16.                         **<****th** width="80" style="cursor: pointer;" onclick="itemSort()"**>**价格**</****th****>**  
17.                         **<****th****>**产地**</****th****>**  
18.                         **<****th** width="100"**>**上架时间**</****th****>**  
19.                     **</****tr****>**   
20.                 **</****thead****>**  
21.                 **<****tbody****>**  
22.                 **<**%  
23.                     Iterator it=itemList.iterator();      
24.                     int i=1;  
25.                     while(it.hasNext())\{  
26.                         Item item=(Item)it.next();    
27.                         if(i%2==0)\{  
28.                     %**>**  
29.                         **<****tr** style="background-color: red;"**>**  
30.                     **<**%     
31.                         \}else\{  
32.                     %**>**  
33.                         **<****tr** style="background-color: green;"**>**  
34.                     **<**%     
35.                         \}  
36.                     %**>**  
37.                         **<****th** width="60"**>****<**%=item.getId() %**>****</****th****>**  
38.                         **<****th** width="130"**>****<**%=item.getName() %**>****</****th****>**  
39.                         **<****th** width="80"**>****<**%=item.getPrice() %**>****</****th****>**  
40.                         **<****th****>****<**%=item.getAddress() %**>****</****th****>**  
41.                         **<****th** width="100"**>****<**%=df.format(item.getBorth()) %**>****</****th****>**  
42.                     **</****tr****>**   
43.                 **<**%     
44.                     i++;      
45.                     \}  
46.              %**>**    
47.             **</****tbody****>**  
48.             **</****table****>**  
49.             **<****table** align="center"**>**  
50.                 **<****tr****>**  
51.                     **<****td****>**  
52.                         **<****a** href="javascript:goPage('first')"**>**首页**</****a****>**  
53.                     **</****td****>**  
54.                     **<****td****>**  
55.                         **<****a** href="javascript:goPage('back')"**>**上一页**</****a****>**  
56.                     **</****td****>**  
57.                     **<****td****>**  
58.                         **<****a** href="javascript:goPage('next')"**>**下一页**</****a****>**  
59.                     **</****td****>**  
60.                     **<****td****>**  
61.                         **<****a** href="javascript:goPage('last')"**>**末页**</****a****>**  
62.                     **</****td****>**  
63.                     **<****td****>****<**%=currenPage %**>**(当前页数)/**<**%=maxPage %**>**(总页数)**</****td****>**  
64.                     **<****td****>**共**<**%=total %**>****</****>**行**</****td****>**  
65.                 **</****tr****>**  
66.             **</****table****>**  
67.               
68.         **<**%     
69.             \}  
70.          %**>**

[view plain]: http://blog.csdn.net/b_ingo/article/details/9736887#