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行每行的用户名和年龄，姓名去重，年龄求和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动态创建表格案例</title>
<style>
table {
border-collapse: collapse;
} table td {
width: 100px;
} .blueBorder {
border:1px solid blue;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script> //button实现
var aaa=function(){
$("#btn").click(function(){
alert(calavgavgage())
$("#avgall").append(calavgavgage());});
}
var bbb=function(){
$("#btn2").click(function(){
onclickname2many();
$("#name2many").append(onclickname2many());
alert(onclickname2many());});
} var ccc=function(){
$("#btn3").click(function(){
changecolumn();});
} var ddd=function(){
$("#btn4").click(function(){
deleterandrow();
evenodd();});
} var eee=function(){
$("#btn5").click(function(){
row5to10();
alert(row5to10())
$("#all_name").append(row5to10());
});
} var lastname = ["赵","钱","孙","李","周","吴","郑","王","陈","孔"];
var firstname = ["一","二","三","四","五","六","七","八","九","十","十一","十二","十三","十四","十五","十六","十七","十八","十九","二十"];
//var age=Math.floor(Math.random()*100);
//var name=lastname[Math.floor(Math.random()*10)]+firstname[Math.floor(Math.random()*20)];
var linenum=Math.floor(Math.random()*50)+50; //奇数偶数行的背景色
var evenodd= function(){
$("#J_TbData tr:even").css("background-color","#f7c10d");
$("#J_TbData tr:odd").css("background-color","#845bb9");
} //将checkbox点击了进行隐藏
var checkbox1=function(){
$(":checkbox").click(function(){
//$(this).parent().hide();
$(this).css("background-color","#FF3700");
$(":checkbox:checked").parent().parent().fadeOut(400, function(){
$(this).hide();
});
evenodd();
return;
});
}
//点击每行的删除按钮后进行整行的删除
var button1=function(){
$(":button[id='deletebutton']").click(function(){
$(this).parent().parent().remove();
evenodd();
return;
});
} //年龄大于60岁的人，整行加像素
var yearold=function(){
$("#J_TbData tr").each(function(){
$tr = $(this);
$td = $(">td:eq(2)",$tr);
//console.log($td.text());
if($.trim($td.text())>"60"){
$tr.css("font-size", function(index, value){
//console.log(index, value);
return parseInt(value) + 10 + 'px';
});
}
})
} //计算表中的平均年龄 逻辑
var calavgavgage=function(avgage){
var total=0;
$("#J_TbData tr").each(function(){
$tr = $(this);
$td = $(">td:eq(2)",$tr);
total +=parseInt($td.text());})
var avgage=total/$("#J_TbData tr").length;
return "页面上所有人的平均年龄是"+avgage;
} //只会用这种复杂的方式计算出出现最多的元素
function findMost(arr){
var tempObj = {};
for (var i = arr.length - 1; i >= 0; i--) {
if (tempObj[arr[i]]) { // 得到元素出现的次数，并组成obj
tempObj[arr[i]] = tempObj[arr[i]] + 1;
} else {
tempObj[arr[i]] = 1;
}
}
var mostVal;
for (var key in tempObj) { // 从对象中得到数组中出现最多的元素
if (!mostVal) {
mostVal = key;
} else if (tempObj[mostVal] < tempObj[key]) {
mostVal = key;
} }
return mostVal;
} //出现最多的姓氏
function onclickname2many(){
var arrayname= [];
$("#J_TbData tr").each(function(){
$tr = $(this);
$td = $(">td:eq(1)",$tr);
arrayname.push($td.text().charAt(0));
})
var lastname=findMost(arrayname);//找出最多的姓氏 $("#J_TbData tr").each(function(){
$tr = $(this);
$td = $(">td:eq(1)",$tr);
if($td.text().charAt(0)==lastname){
//$tr.css("border","blue");
$tr.addClass('blueBorder')
};})
return "数组中出现最多的姓氏是"+lastname;
} //将第二行和第三行对调
function changecolumn(){
$("#J_TbData tr").each(function(){
$tr = $(this);
$tdcolumn2 = $(">td:eq(1)",$tr);
$tdcolumn3 = $(">td:eq(2)",$tr);
$tdcolumn2.insertAfter($tdcolumn3);
})
}
//随机删除方法
function deleterandrow(){
for(var i=0;i<10;i++){
var table_length=$("#J_TbData tr").size();
var rownum=Math.floor(Math.random()*table_length);
$("#J_TbData tr")[rownum].remove();
}
}
//取出第5行到第10行到姓名和年龄
function row5to10(){
var rowname=[];
var rowage=[];
for(var i=4;i<10;i++){
rowname.push($(">td:eq(1)",$("#J_TbData tr")[i]).html());
rowage.push(parseInt($(">td:eq(2)",$("#J_TbData tr")[i]).text()));
}
var unique_nanme=$.unique(rowname);
var total_age=eval(rowage.join("+"));
return "第5行到第10行的姓名是"+rowname +"去重之后还剩下的name"+unique_nanme+"第5行到第10行的年龄是"+rowage+"求和之后的年龄是"+total_age;
} //生成随机的行数
function create(){
for( var i = 0; i < linenum; i++ ) {
//动态创建一个tr行标签,并且转换成jQuery对象
var $trTemp = $("<tr></tr>");
//往行里面追加 td单元格
$trTemp.append("<td class='column1'>"+ "<input type='checkbox' id='linenum'>"+(i+1)+"</td>");
$trTemp.append("<td class='column2'>"+ lastname[Math.floor(Math.random()*10)]+firstname[Math.floor(Math.random()*20)]+"</td>");
$trTemp.append("<td class='column3'>"+ "<span id='age'>"+(Math.floor(Math.random()*100)+1) +"</span>"+"</td>");
$trTemp.append("<td class='column4'>"+ "<input type='button' id='deletebutton' value='点我删除'>" +"</td>");
$trTemp.appendTo("#J_TbData");
}
} //all
$(function(){ create();
evenodd();
checkbox1();
button1();
yearold();
calavgavgage();
aaa();
bbb();
ccc();
ddd();
eee(); }); </script>
</head>
<body>
<input id="btn" type="button" value='点我统计出平均年龄' /></br>
<p id="avgall"></p>
<input id="btn2" type="button" value='点我把姓氏最多的行边框变成蓝色' /></br>
<p id="name2many"></p>
<input id="btn3" type="button" value='点我把第二列和第三列调换位置' /></br>
<input id="btn4" type="button" value='点我随机删除10行数据' /></br>
<input id="btn5" type="button" value='点我取出第5-10行每行的用户名和年龄，姓名去重，年龄求和' /></br>
<p id="all_name"></p> <table>
<thead>
<tr>
<th>Box</th>
<th>用户姓名</th>
<th>用户年龄</th>
<th>操作说明</th>
</tr>
</thead>
<tbody id="J_TbData">
</tbody>
</table> </body>
</html>
jquery作业的更多相关文章
- jQuery 作业三个按钮
作业三个按钮 <!--声明 文档--> <!DOCTYPE html> <!--定义字符集--> <html lang="zh-CN"&g ...
- jquery作业 教授答案
http://www.cnblogs.com/qianjinyan/p/8961086.html 题目要求: 1. 通过jquery动态的创建一个表格,随机生成(id自增,name随机2-3个中文汉字 ...
- jQuery作业 点击显示
代码如下: 里: 导入jQuery包: 里:内容 水果 苹果 橘子 梨子 香蕉 化妆品 口红 眼影 腮红 高光 护肤品 水 乳 霜 精华
- Python3.5 学习十七
jQuery 模块=类库 jQuery就是DOM .BOM.Javascript的封装成的类库 一.查找元素.DOM只有10种左右选择器 jQuery有很多选择器和筛选器 PS:jQuery 推荐1系 ...
- jquery实现增删改（伪）-老男孩作业day13
使用jquery进行,文件的编写,实现自增id,删除,添加,编辑模式. jquery放在本地,src="jquery_js.js" 可以改成其他,或者在线的路径 readme &l ...
- （day48作业）jQuery+Bootstrap练习题
目录 一.图书管理系统页面搭建 二.jQuery练习题 一.图书管理系统页面搭建 <!DOCTYPE html> <html lang="en"> < ...
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- Python之路【第十二篇续】jQuery案例详解
jQuery 1.jQuery和JS和HTML的关系 首先了HTML是实际展示在用户面前的用户可以直接体验到的,JS是操作HTML的他能改变HTML实际展示给用户的效果! 首先了解JS是一门语言,他是 ...
随机推荐
- linux 定时任务详解 按秒设定
实现linux定时任务有:cron.anacron.at等,这里主要介绍cron服务. 名词解释: cron是服务名称,crond是后台进程,crontab则是定制好的计划任务表. 软件包安装: 要使 ...
- Cocos2D iOS之旅:如何写一个敲地鼠游戏(三):素材最终解决方法
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- [GitHub]第三讲：简单分支操作
Git 最核心的操作对象是版本( commit ),最核心的操作技巧就是分支. 什么是分支? 仓库创建后,一旦有了新 commit,默认就会放到一个分支上,名字叫 master.前面咱们一直看到的多个 ...
- iOS开发之三：常用控件--UILabel的使用
UILabel 一般用来显示文本内容. 常用的属性如下: @property(nonatomic,copy) NSString *text; // 文本的内容,默认为 nil @property(no ...
- General Ledger Useful SQL Scripts
General Ledger Useful SQL Scripts – Oracle Applications 11i Contents GL Set of Books Configuration O ...
- TCP的定时器系列 — 超时重传定时器
主要内容:TCP定时器概述,超时重传定时器.ER延迟定时器.PTO定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd Q:一条TCP连接会使用 ...
- Uva - 177 - Paper Folding
If a large sheet of paper is folded in half, then in half again, etc, with all the folds parallel, t ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(二十四)
我们回到Xcode,打开GameScene.m,首先要添加实例变量: CCNode *_trackLine; 为了根据选中的赛道更新_trackLine的位置,我们添加一个显示方法: -(void)s ...
- XBMC源代码分析 3：核心部分（core）-综述
前文分析了XBMC的整体结构以及皮肤部分: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) 本文以及以后的文章主要分析XBMC的VC工程中的源代码. ...
- libgdx 1.4.1发布
(转载自http://www.libgdx.cn/topic/4/libgdx-1-4-1%E5%8F%91%E5%B8%83) libgdx从未停止进步的脚步.10月10日,libgdx1.4.1发 ...