1. 通过jquery动态的创建一个表格，随机生成（id自增，name随机2-3个中文汉字（10个姓，20个名字），age随机100以内整数）大于50小于100行的数据（用户对象:id,name,age），
2. 每行分4列，第一列显示checkbox，第二列显示用户名，第三列显示年龄，第四列显示删除操作，点击删除按钮可以把这行数据删掉
3. 区分基数行和偶数行背景色
4. 把所有年龄超过60岁的行字号 + 10px
5. 统计出平均年龄（jquery方法）
6. 把姓氏最多的行边框变成蓝色
7. 随机删除10行数据
8. 把第二列和第三列调换位置
9. 取出第5-10行每行的用户名和年龄，姓名去重，年龄求和
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jQuery动态创建表格案例</title>
6 <style>
7 table {
8 border-collapse: collapse;
9 }
10
11 table td {
12 width: 100px;
13 }
14
15 .blueBorder {
16 border:1px solid blue;
17 }
18 </style>
19 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
20 <script>
21
22 //button实现
23 var aaa=function(){
24 $("#btn").click(function(){
25 alert(calavgavgage())
26 $("#avgall").append(calavgavgage());});
27 }
28 var bbb=function(){
29 $("#btn2").click(function(){
30 onclickname2many();
31 $("#name2many").append(onclickname2many());
32 alert(onclickname2many());});
33 }
34
35 var ccc=function(){
36 $("#btn3").click(function(){
37 changecolumn();});
38 }
39
40 var ddd=function(){
41 $("#btn4").click(function(){
42 deleterandrow();
43 evenodd();});
44 }
45
46 var eee=function(){
47 $("#btn5").click(function(){
48 row5to10();
49 alert(row5to10())
50 $("#all_name").append(row5to10());
51 });
52 }
53
54 var lastname = ["赵","钱","孙","李","周","吴","郑","王","陈","孔"];
55 var firstname = ["一","二","三","四","五","六","七","八","九","十","十一","十二","十三","十四","十五","十六","十七","十八","十九","二十"];
56 //var age=Math.floor(Math.random()*100);
57 //var name=lastname[Math.floor(Math.random()*10)]+firstname[Math.floor(Math.random()*20)];
58 var linenum=Math.floor(Math.random()*50)+50;
59
60 //奇数偶数行的背景色
61 var evenodd= function(){
62 $("#J_TbData tr:even").css("background-color","#f7c10d");
63 $("#J_TbData tr:odd").css("background-color","#845bb9");
64 }
65
66 //将checkbox点击了进行隐藏
67 var checkbox1=function(){
68 $(":checkbox").click(function(){
69 //$(this).parent().hide();
70 $(this).css("background-color","#FF3700");
71 $(":checkbox:checked").parent().parent().fadeOut(400, function(){
72 $(this).hide();
73 });
74 evenodd();
75 return;
76 });
77 }
78 //点击每行的删除按钮后进行整行的删除
79 var button1=function(){
80 $(":button[id='deletebutton']").click(function(){
81 $(this).parent().parent().remove();
82 evenodd();
83 return;
84 });
85 }
86
87 //年龄大于60岁的人，整行加像素
88 var yearold=function(){
89 $("#J_TbData tr").each(function(){
90 $tr = $(this);
91 $td = $(">td:eq(2)",$tr);
92 //console.log($td.text());
93 if($.trim($td.text())>"60"){
94 $tr.css("font-size", function(index, value){
95 //console.log(index, value);
96 return parseInt(value) + 10 + 'px';
97 });
98 }
99 })
100 }
101
102
103
104 //计算表中的平均年龄 逻辑
105 var calavgavgage=function(avgage){
106 var total=0;
107 $("#J_TbData tr").each(function(){
108 $tr = $(this);
109 $td = $(">td:eq(2)",$tr);
110 total +=parseInt($td.text());})
111 var avgage=total/$("#J_TbData tr").length;
112 return "页面上所有人的平均年龄是"+avgage;
113 }
114
115 //只会用这种复杂的方式计算出出现最多的元素
116 function findMost(arr){
117 var tempObj = {};
118 for (var i = arr.length - 1; i >= 0; i--) {
119 if (tempObj[arr[i]]) { // 得到元素出现的次数，并组成obj
120 tempObj[arr[i]] = tempObj[arr[i]] + 1;
121 } else {
122 tempObj[arr[i]] = 1;
123 }
124 }
125 var mostVal;
126 for (var key in tempObj) { // 从对象中得到数组中出现最多的元素
127 if (!mostVal) {
128 mostVal = key;
129 } else if (tempObj[mostVal] < tempObj[key]) {
130 mostVal = key;
131 }
132
133 }
134 return mostVal;
135 }
136
137 //出现最多的姓氏
138 function onclickname2many(){
139 var arrayname= [];
140 $("#J_TbData tr").each(function(){
141 $tr = $(this);
142 $td = $(">td:eq(1)",$tr);
143 arrayname.push($td.text().charAt(0));
144 })
145 var lastname=findMost(arrayname);//找出最多的姓氏
146
147 $("#J_TbData tr").each(function(){
148 $tr = $(this);
149 $td = $(">td:eq(1)",$tr);
150 if($td.text().charAt(0)==lastname){
151 //$tr.css("border","blue");
152 $tr.addClass('blueBorder')
153 };})
154 return "数组中出现最多的姓氏是"+lastname;
155 }
156
157 //将第二行和第三行对调
158 function changecolumn(){
159 $("#J_TbData tr").each(function(){
160 $tr = $(this);
161 $tdcolumn2 = $(">td:eq(1)",$tr);
162 $tdcolumn3 = $(">td:eq(2)",$tr);
163 $tdcolumn2.insertAfter($tdcolumn3);
164 })
165 }
166 //随机删除方法
167 function deleterandrow(){
168 for(var i=0;i<10;i++){
169 var table_length=$("#J_TbData tr").size();
170 var rownum=Math.floor(Math.random()*table_length);
171 $("#J_TbData tr")[rownum].remove();
172 }
173 }
174 //取出第5行到第10行到姓名和年龄
175 function row5to10(){
176 var rowname=[];
177 var rowage=[];
178 for(var i=4;i<10;i++){
179 rowname.push($(">td:eq(1)",$("#J_TbData tr")[i]).html());
180 rowage.push(parseInt($(">td:eq(2)",$("#J_TbData tr")[i]).text()));
181 }
182 var unique_nanme=$.unique(rowname);
183 var total_age=eval(rowage.join("+"));
184 return "第5行到第10行的姓名是"+rowname +"去重之后还剩下的name"+unique_nanme+"第5行到第10行的年龄是"+rowage+"求和之后的年龄是"+total_age;
185 }
186
187 //生成随机的行数
188 function create(){
189 for( var i = 0; i < linenum; i++ ) {
190 //动态创建一个tr行标签,并且转换成jQuery对象
191 var $trTemp = $("<tr></tr>");
192 //往行里面追加 td单元格
193 $trTemp.append("<td class='column1'>"+ "<input type='checkbox' id='linenum'>"+(i+1)+"</td>");
194 $trTemp.append("<td class='column2'>"+ lastname[Math.floor(Math.random()*10)]+firstname[Math.floor(Math.random()*20)]+"</td>");
195 $trTemp.append("<td class='column3'>"+ "<span id='age'>"+(Math.floor(Math.random()*100)+1) +"</span>"+"</td>");
196 $trTemp.append("<td class='column4'>"+ "<input type='button' id='deletebutton' value='点我删除'>" +"</td>");
197 $trTemp.appendTo("#J_TbData");
198 }
199 }
200
201 //all
202 $(function(){
203
204 create();
205 evenodd();
206 checkbox1();
207 button1();
208 yearold();
209 calavgavgage();
210 aaa();
211 bbb();
212 ccc();
213 ddd();
214 eee();
215
216 });
217
218 </script>
219 </head>
220 <body>
221 <input id="btn" type="button" value='点我统计出平均年龄' /></br>
222 <p id="avgall"></p>
223 <input id="btn2" type="button" value='点我把姓氏最多的行边框变成蓝色' /></br>
224 <p id="name2many"></p>
225 <input id="btn3" type="button" value='点我把第二列和第三列调换位置' /></br>
226 <input id="btn4" type="button" value='点我随机删除10行数据' /></br>
227 <input id="btn5" type="button" value='点我取出第5-10行每行的用户名和年龄，姓名去重，年龄求和' /></br>
228 <p id="all_name"></p>
229
230
231 <table>
232 <thead>
233 <tr>
234 <th>Box</th>
235 <th>用户姓名</th>
236 <th>用户年龄</th>
237 <th>操作说明</th>
238 </tr>
239 </thead>
240 <tbody id="J_TbData">
241 </tbody>
242 </table>
243
244
245
246 </body>
247 </html>
------------------------- A little Progress a day makes you a big success... ----------------------------
浙公网安备 33010602011771号