zoukankan      html  css  js  c++  java

  • jquery作业

    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>
  • 相关阅读:
    PAT 乙级真题 1013.组个最小数
    PAT 乙级真题 1012.D进制的A+B
    PAT 乙级真题 1011.个位数统计
    PAT 乙级真题 1010.月饼
    PAT 乙级真题 1009.1019.数字黑洞
    PAT 乙级真题 1008.锤子剪刀布
    PAT 乙级真题 1007.A除以B
    PAT 乙级真题 1006.1016.部分A+B
    C++自定义sort函数
    VS2017如何使用scanf函数
  • 原文地址：https://www.cnblogs.com/qianjinyan/p/8961086.html
Copyright © 2011-2022 走看看