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是一门语言,他是 ...
随机推荐
- USB有时adb shell连不上设备
USB有时adb shell连不上设备 图1 下面汇总有效的解决方法 1. 重启 2. 卸载和重新装载驱动 图2 3.
- ASP.NET实现网页版小优盘
今天看到了一篇不错的文章,就拿来一起分享一下吧. 实现的是文件的上传与下载功能. 关于文件上传: 谈及文件上传到网站上,首先我们想到的就是通过什么上传呢?在ASP.NET中,只需要用FileUploa ...
- bash:chkconfig:command not found
1尝试sudo/su rootsudo chkconfig --list2上述方法不行,请检查是否安装chkconfigrpm -qa |grep chkconfigubuntu上默认是不支持chkc ...
- java Domj4读取xml文件
先概括,再以代码形式给出. 获取节点: Iterator Element.nodeIterator(); //获取当前标签节点下的所有子节点 获取 标签: Element Document.get ...
- Touch Handling in Cocos2D 3.x(三)
取得触摸位置 最有趣的部分是触摸的位置.接下来我们将使用触摸位置在玩家每次点击的屏幕位置上添加精灵.为了完成这项功能我们需要修改touchBegan的实现,替换旧的代码如下: - (void)touc ...
- 看看腾讯是怎么做产品设计分析的 － 腾讯QQ音乐业务产品规划
- iOS开发的10个知识点
1.关于关键字volatile 一个定义为volatile的变量是说这变量可能会被意想不到地改变,这样,编译器就不会去假设这个变量的值了.精确地说就是,优化器在用到这个变量时必须每次都小心地重新读取这 ...
- 高通 MSM8K bootloader 之三： LK
- Dynamics CRM2011 隐藏sub-grid 新建项和添加现有项按钮
在CRM2011中ribbon区的自定义按钮可以通过工具例如RibbonEditor或者RibbonWorkbench进行配置包括action.display等等,但是系统级别的按钮是不能进行编辑的, ...
- python函数参数是值传递还是引用传递（以及变量间复制后是否保持一致）：取决于对象内容可变不可变
函数参数传递本质上和变量整体复制一样,只是两个变量分别为形参a和实参b.那么,a=b后,a变了,b值是否跟着变呢?这取决于对象内容可变不可变 首先解释一下,什么是python对象的内容可变不可变? p ...