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是一门语言,他是 ...
随机推荐
- 解决WebView加载本地文件乱码
一.问题描述 这几天现场反馈一些问题,主要是文件浏览有部分文件显示乱码,像这样: 而文件本身又是用WebView加载的,出现有的文件正常有的文件不正常. 二.问题解决 webView 加载主要有:lo ...
- 海量数据挖掘MMDS week6: MapReduce算法（进阶）
http://blog.csdn.net/pipisorry/article/details/49445519 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...
- 设计模式之——工厂模式(A)
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41085085 昨天看完了工厂模式,觉得在开发的过程中好多地 ...
- Oracle Enterprise Linux 64-bit 下Oracle11g的监听配置修改及测试步骤
测试环境:Oracle Enterprise Linux 64-bit (5.8版本) + Oracle 11g 64位 相关说明: Oracle11g64位软件的安装位置为/u01/app/orac ...
- 最简单的基于FFMPEG的图像编码器（YUV编码为JPEG）
伴随着毕业论文的完成,这两天终于腾出了空闲,又有时间搞搞FFMPEG的研究了.想着之前一直搞的都是FFMPEG解码方面的工作,很少涉及到FFMPEG编码方面的东西,于是打算研究一下FFMPEG的编码. ...
- 【一天一道LeetCode】索引目录 ---C++实现
[一天一道LeetCode]汇总目录 这篇博客主要收藏了博主所做题目的索引目录,帮助各位读者更加快捷的跳转到对应题目 目录按照难易程度:easy,medium,hard来划分,读者可以按照难易程度进行 ...
- Python学习笔记 - list和tuple
demo 1 #!/usr/bin/env python3 # -*- coding: utf-8 -*- >>> classmates = ['Michael', 'Bob', ' ...
- 【uWSGI】 listen queue of socket (fd: 3) 错误分析
现在django的应用基本都是使用uWSGI来部署,类似下面 listen queue of socket "127.0.0.1:9001" (fd: 3) 的错误出现过2次,下面 ...
- 目前调试移动设备程序只能通过USB线缆
就像iOS,转移(到设备上)并调试App不可能通过WiFi或蓝牙连接. 一个有线的USB线缆连接现今主要用来调试. 确保你直接将Android设备插入Mac的USB接口,避免使用USB hubs和扩展 ...
- Linux特殊权限分析(第二版)
SetUID[权限值=4] 问题:为什么普通用户可以修改自己的密码? ll $(which passwd) 1.SetUID:当一个可执行程序/命令具有SetUID 权限,用户执行这个程序时,将以这个 ...