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是一门语言,他是 ...
随机推荐
- EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证
{ field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...
- 【一天一道LeetCode】#102. Binary Tree Level Order Traversal
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 来源: htt ...
- android dataBinding详解
官方介绍地址:http://developer.android.com/intl/zh-cn/tools/data-binding/guide.html 2015 Google IO 大会带来的 Da ...
- mysql DISTINCT 的实现与优化
DISTINCT实际上和GROUP BY的操作非常相似,只不过是在GROUP BY之后的每组中只取出一条记录而已.所以,DISTINCT的实现和GROUP BY的实现也基本差不多,没有太大的区别.同样 ...
- 分布式进阶(八)Linux提示Unable to locate package该如何处理？
Linux提示Unable to locate package该如何处理? 当你在修改Linux软件源的时候,提示Unable to locate package错误,这是由什么原因导致的呢?又该如何 ...
- Weblogic10 集群配置
1.预备知识 什么是Domain和Server Domain Domain是WebLogic Server实例的基本管理单元.所谓Domain就是,由配置为Administrator Serve ...
- 认识 SurfaceView
SurfaceView是基于View视图进行扩展的视图类,适用于2D游戏开发,主要特点有: [1]surfaceView中对于画布的重绘是由一个新的线程去绘制,因此可以处理一些耗时的操作 [2]sur ...
- 被final关键字坑了
一直都傻傻的以为用final关键字定义的都是不可变的.没想到的是对基本类型来说,这是一直成立的. 但是对于final修饰的对象,仍然可以修改对象里面的对象和成员变量.不变的只是当前对象的地址. 昨天我 ...
- java对象大小
Java对象的内存布局:对象头(Header),实例数据(Instance Data)和对齐填充(Padding) 对象头在32位系统上占用8B,64位系统上占16B. 无论是32位系统还是64位系统 ...
- [转]ubuntu安装vncserver实现图形化访问
请注意: 如果在安装中部分软件无法安装成功,说明软件源中缺包,先尝试使用命令#apt-get update更新软件源后尝试安装.如果还是不行,需要更换软件源.更换步骤: 1)输入命令#cp /et ...