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是一门语言,他是 ...
随机推荐
- printk的用法
printk的用法 内核通过 printk() 输出的信息具有日志级别,日志级别是通过在 printk() 输出的字符串前加一个带尖括号的整数来控制的,如 printk("<6> ...
- Android之Gallery和Spinner-Android学习之旅（二十九）
Spinner简介 spinner是竖直方向展开一个列表供选择.和gallery都是继承了AbsSpinner,AbsSpinner继承了AdapterView,因此AdaptyerView的属性都可 ...
- 【一天一道LeetCode】#169. Majority Element
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- 【一天一道LeetCode】#242. Valid Anagram
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...
- 【一天一道LeetCode】#258. Add Digits
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- python类：magic魔术方法
http://blog.csdn.net/pipisorry/article/details/50708812 魔术方法是面向对象Python语言中的一切.它们是你可以自定义并添加"魔法&q ...
- Ubuntu文件中文乱码
如图,该文件在gedit打开中文显示正常 在命令行中用vim打开,显示内容如下: 使用命令进行编码转换 iconv -f gbk -t utf8 ./SogouQ.mini > ./sougou ...
- iOS高效编程秘诀—坚持编程习惯
资料源于网络 习惯会影响一个人做事的方式,也会直接影响效率.我经常在项目完成后自我总结,有哪些做得好的,有哪些做得不好的?然后把一些好的流程记录下来,并且重新运用回编程中.那些能够坚持去做的流程,就变 ...
- pig的grunt中shell命令不稳定，能不用尽量不用
shell命令:mv a b 将文件a改名为b, 可如果b已经存在,比如/test文件下有a和b两个文件,执行mv a b后,b被覆盖的了.也就是/test文件下只有a. 但是mv命令在pig的g ...
- JAVA之旅（十二）——Thread，run和start的特点，线程运行状态，获取线程对象和名称，多线程实例演示，使用Runnable接口
JAVA之旅(十二)--Thread,run和start的特点,线程运行状态,获取线程对象和名称,多线程实例演示,使用Runnable接口 开始挑战一些难度了,线程和I/O方面的操作了,继续坚持 一. ...