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 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>