如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

参考答案：

1. <table id="table" border="1">
   
2.         <tr>
   
3.             <th id="name">姓名</th>
   
4.             <th id="power">力量</th>
   
5.             <th id="agility">敏捷</th>
   
6.             <th id="iq">智力</th>
   
7.         </tr>
   
8. </table>
   
9. 
   

复制代码

1.   var data = [{
   
2.         name: '德鲁伊',
   
3.         power: 17,
   
4.         agility: 24,
   
5.         iq: 13
   
6.     }, {
   
7.         name: '月之骑士',
   
8.         power: 15,
   
9.         agility: 22,
   
10.         iq: 16
    
11.     }, {
    
12.         name: '众神之王',
    
13.         power: 19,
    
14.         agility: 15,
    
15.         iq: 20
    
16.     }, {
    
17.         name: '流浪剑客',
    
18.         power: 23,
    
19.         agility: 15,
    
20.         iq: 14
    
21.     }];
    
22. 
    
23.     ! function() { //初始化渲染
    
24.         var table = $('table');
    
25.         for (var i = 0; i < data.length; i++) {
    
26.             item = '<tr><td class="name">' + data[i].name + '</td><td class="power">' + data[i].power + '</td><td class="agility">' + data[i].agility + '</td><td class="iq">' + data[i].iq + '</td></tr>';
    
27.             table.append(item);
    
28.         }
    
29.     }()
    
30. 
    
31.     ! function() {
    
32.         var count_name = 0,count_power = 0,count_agility = 0,count_iq = 0;
    
33. 
    
34.         $('#name').click(function() {
    
35.             count_power = 0,count_agility = 0,count_iq = 0;    //将其他排序列状态置零，也就是说当点了姓名进行排序之后，若再点其它排序，那么必然是从升序开始
    
36.             if (count_name % 2 === 1) { //奇数升序
    
37.                 data = sort(data, 'name', 'unicode,ascend');
    
38.             } else { //偶数降序
    
39.                 data = sort(data, 'name', 'unicode,descend');
    
40.             }
    
41.             count_name++;
    
42. 
    
43.             //视图层渲染
    
44.             var area = $("tr").slice(1);
    
45.             for (var i = 0; i < data.length; i++) {
    
46.                 area.eq(i).find('.name').text(data[i].name);
    
47.                 area.eq(i).find('.power').text(data[i].power);
    
48.                 area.eq(i).find('.agility').text(data[i].agility);
    
49.                 area.eq(i).find('.iq').text(data[i].iq);
    
50.             }
    
51.         })
    
52.         $('#power').click(function() {
    
53.             count_name = 0,count_agility = 0,count_iq = 0;
    
54.             if (count_power % 2 === 1) {
    
55.                 data = sort(data, 'power', 'number,ascend');
    
56.             } else {
    
57.                 data = sort(data, 'power', 'number,descend');
    
58.             }
    
59.             count_power++;
    
60. 
    
61.             var area = $("tr").slice(1);
    
62.             for (var i = 0; i < data.length; i++) {
    
63.                 area.eq(i).find('.name').text(data[i].name);
    
64.                 area.eq(i).find('.power').text(data[i].power);
    
65.                 area.eq(i).find('.agility').text(data[i].agility);
    
66.                 area.eq(i).find('.iq').text(data[i].iq);
    
67.             }
    
68.         })
    
69.         $('#agility').click(function() {
    
70.             count_name = 0,count_power = 0,count_iq = 0;
    
71.             if (count_agility % 2 === 1) {
    
72.                 data = sort(data, 'agility', 'number,ascend');
    
73.             } else {
    
74.                 data = sort(data, 'agility', 'number,descend');
    
75.             }
    
76.             count_agility++;
    
77. 
    
78.             var area = $("tr").slice(1);
    
79.             for (var i = 0; i < data.length; i++) {
    
80.                 area.eq(i).find('.name').text(data[i].name);
    
81.                 area.eq(i).find('.power').text(data[i].power);
    
82.                 area.eq(i).find('.agility').text(data[i].agility);
    
83.                 area.eq(i).find('.iq').text(data[i].iq);
    
84.             }
    
85.         })
    
86.         $('#iq').click(function() {
    
87.             count_name = 0,count_power = 0,count_agility = 0;
    
88.             if (count_iq % 2 === 1) {
    
89.                 data = sort(data, 'iq', 'number,ascend');
    
90.             } else {
    
91.                 data = sort(data, 'iq', 'number,descend');
    
92.             }
    
93.             count_iq++;
    
94. 
    
95.             var area = $("tr").slice(1);
    
96.             for (var i = 0; i < data.length; i++) {
    
97.                 area.eq(i).find('.name').text(data[i].name);
    
98.                 area.eq(i).find('.power').text(data[i].power);
    
99.                 area.eq(i).find('.agility').text(data[i].agility);
    
100.                 area.eq(i).find('.iq').text(data[i].iq);
     
101.             }
     
102.         })
     
103.     }()
     
104. 
     
105.     //对数据进行排序
     
106.     function sort(data, field, compareFunction) {
     
107.         var handler = {
     
108.             'unicode,ascend': function(pre, next) {
     
109.                 if (pre[field] > next[field])
     
110.                     return -1;
     
111.                 else
     
112.                     return 1;
     
113.             },
     
114.             'unicode,descend': function(pre, next) {
     
115.                 if (pre[field] > next[field])
     
116.                     return 1;
     
117.                 else
     
118.                     return -1;
     
119.             },
     
120.             'number,ascend': function(pre, next) {
     
121.                 return next[field] - pre[field];
     
122.             },
     
123.             'number,descend': function(pre, next) {
     
124.                 return pre[field] - next[field];
     
125.             }
     
126.         }
     
127.         if (typeof compareFunction === 'string') {
     
128.             data.sort(handler[compareFunction]);
     
129.         } else if (typeof compareFunction === 'function')
     
130.             data.sort(compareFunction);
     
131.         else
     
132.             data.sort();
     
133.         return data;
     
134.     }

复制代码

如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

参考答案：

1. <table id="table" border="1">
   
2.         <tr>
   
3.             <th id="name">姓名</th>
   
4.             <th id="power">力量</th>
   
5.             <th id="agility">敏捷</th>
   
6.             <th id="iq">智力</th>
   
7.         </tr>
   
8. </table>
   
9. 
   

复制代码

1.   var data = [{
   
2.         name: '德鲁伊',
   
3.         power: 17,
   
4.         agility: 24,
   
5.         iq: 13
   
6.     }, {
   
7.         name: '月之骑士',
   
8.         power: 15,
   
9.         agility: 22,
   
10.         iq: 16
    
11.     }, {
    
12.         name: '众神之王',
    
13.         power: 19,
    
14.         agility: 15,
    
15.         iq: 20
    
16.     }, {
    
17.         name: '流浪剑客',
    
18.         power: 23,
    
19.         agility: 15,
    
20.         iq: 14
    
21.     }];
    
22. 
    
23.     ! function() { //初始化渲染
    
24.         var table = $('table');
    
25.         for (var i = 0; i < data.length; i++) {
    
26.             item = '<tr><td class="name">' + data[i].name + '</td><td class="power">' + data[i].power + '</td><td class="agility">' + data[i].agility + '</td><td class="iq">' + data[i].iq + '</td></tr>';
    
27.             table.append(item);
    
28.         }
    
29.     }()
    
30. 
    
31.     ! function() {
    
32.         var count_name = 0,count_power = 0,count_agility = 0,count_iq = 0;
    
33. 
    
34.         $('#name').click(function() {
    
35.             count_power = 0,count_agility = 0,count_iq = 0;    //将其他排序列状态置零，也就是说当点了姓名进行排序之后，若再点其它排序，那么必然是从升序开始
    
36.             if (count_name % 2 === 1) { //奇数升序
    
37.                 data = sort(data, 'name', 'unicode,ascend');
    
38.             } else { //偶数降序
    
39.                 data = sort(data, 'name', 'unicode,descend');
    
40.             }
    
41.             count_name++;
    
42. 
    
43.             //视图层渲染
    
44.             var area = $("tr").slice(1);
    
45.             for (var i = 0; i < data.length; i++) {
    
46.                 area.eq(i).find('.name').text(data[i].name);
    
47.                 area.eq(i).find('.power').text(data[i].power);
    
48.                 area.eq(i).find('.agility').text(data[i].agility);
    
49.                 area.eq(i).find('.iq').text(data[i].iq);
    
50.             }
    
51.         })
    
52.         $('#power').click(function() {
    
53.             count_name = 0,count_agility = 0,count_iq = 0;
    
54.             if (count_power % 2 === 1) {
    
55.                 data = sort(data, 'power', 'number,ascend');
    
56.             } else {
    
57.                 data = sort(data, 'power', 'number,descend');
    
58.             }
    
59.             count_power++;
    
60. 
    
61.             var area = $("tr").slice(1);
    
62.             for (var i = 0; i < data.length; i++) {
    
63.                 area.eq(i).find('.name').text(data[i].name);
    
64.                 area.eq(i).find('.power').text(data[i].power);
    
65.                 area.eq(i).find('.agility').text(data[i].agility);
    
66.                 area.eq(i).find('.iq').text(data[i].iq);
    
67.             }
    
68.         })
    
69.         $('#agility').click(function() {
    
70.             count_name = 0,count_power = 0,count_iq = 0;
    
71.             if (count_agility % 2 === 1) {
    
72.                 data = sort(data, 'agility', 'number,ascend');
    
73.             } else {
    
74.                 data = sort(data, 'agility', 'number,descend');
    
75.             }
    
76.             count_agility++;
    
77. 
    
78.             var area = $("tr").slice(1);
    
79.             for (var i = 0; i < data.length; i++) {
    
80.                 area.eq(i).find('.name').text(data[i].name);
    
81.                 area.eq(i).find('.power').text(data[i].power);
    
82.                 area.eq(i).find('.agility').text(data[i].agility);
    
83.                 area.eq(i).find('.iq').text(data[i].iq);
    
84.             }
    
85.         })
    
86.         $('#iq').click(function() {
    
87.             count_name = 0,count_power = 0,count_agility = 0;
    
88.             if (count_iq % 2 === 1) {
    
89.                 data = sort(data, 'iq', 'number,ascend');
    
90.             } else {
    
91.                 data = sort(data, 'iq', 'number,descend');
    
92.             }
    
93.             count_iq++;
    
94. 
    
95.             var area = $("tr").slice(1);
    
96.             for (var i = 0; i < data.length; i++) {
    
97.                 area.eq(i).find('.name').text(data[i].name);
    
98.                 area.eq(i).find('.power').text(data[i].power);
    
99.                 area.eq(i).find('.agility').text(data[i].agility);
    
100.                 area.eq(i).find('.iq').text(data[i].iq);
     
101.             }
     
102.         })
     
103.     }()
     
104. 
     
105.     //对数据进行排序
     
106.     function sort(data, field, compareFunction) {
     
107.         var handler = {
     
108.             'unicode,ascend': function(pre, next) {
     
109.                 if (pre[field] > next[field])
     
110.                     return -1;
     
111.                 else
     
112.                     return 1;
     
113.             },
     
114.             'unicode,descend': function(pre, next) {
     
115.                 if (pre[field] > next[field])
     
116.                     return 1;
     
117.                 else
     
118.                     return -1;
     
119.             },
     
120.             'number,ascend': function(pre, next) {
     
121.                 return next[field] - pre[field];
     
122.             },
     
123.             'number,descend': function(pre, next) {
     
124.                 return pre[field] - next[field];
     
125.             }
     
126.         }
     
127.         if (typeof compareFunction === 'string') {
     
128.             data.sort(handler[compareFunction]);
     
129.         } else if (typeof compareFunction === 'function')
     
130.             data.sort(compareFunction);
     
131.         else
     
132.             data.sort();
     
133.         return data;
     
134.     }

复制代码