http://www.cnblogs.com/qianjinyan/p/8961086.html

题目要求:

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" dir="ltr"> <head>
<meta charset="utf-8">
<title>Tommy Exam</title>
<style>
.table {
border-collapse: collapse;
} .table td {
width: 150px;
} .evenTr {
background: #ccc;
} .blueBorder {
border:1px solid blue;
}
</style>
</head> <body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () { var table, buttons;
var __id__ = 1;
var firstNames = Array.from('赵钱孙李周吴郑王冯陈');
var lastNames = Array.from('大小中高矮胖瘦宝兵杰武明一婷婉晓奇志远林');
var nameIndex = 1, ageIndex = 2;
var init = function() {
createButtons();
createTable();
}; var createButtons = function() {
buttons = $('<div/>', {style:'margin-top:10px; text-align:center;'});
$('body').append(buttons);
createButton('>60岁字体+10px', addFontSizeFor60);
createButton('统计平均年龄', average);
createButton('姓氏最多边框变蓝', mostLastName);
createButton('随机删除10行数据', randomDelete10Rows);
createButton('调换2,3列', change23);
createButton('5-10姓名去重', names5to10);
}; var addFontSizeFor60 = function() {
table.find('tr').find('td:eq('+ageIndex+')').each((i, ele) => {if (parseInt($(ele).text()) > 60){
$(ele).parent().css('font-size', (index, value) => parseInt(value) + 10 + 'px');
}})
}; var average = function() {
var total = table.find('tr').find('td:eq('+ageIndex+')').map((index, ele) => parseInt($(ele).text())).get().reduce((p,c) => p+c);
var rows = table.find('tr').length;
alert('平均年龄=' + total/rows);
}; var mostLastName = function() {
$('.blueBorder').removeClass('blueBorder');
var map = {};
table.find('tr')
.find('td:eq(' + nameIndex +')')
.map((index, ele) => $(ele).text().substring(0,1))
.get()
.forEach(v => {
if (!map[v]) {
map[v] = {name : v, nums : 1};
} else {
map[v].nums ++;
}
});
var _firstName = Object.values(map).sort((a, b) => b.nums - a.nums)[0].name;
table.find('tr')
.find('td:eq(' + nameIndex +'):contains("'+_firstName+'")').parent().addClass('blueBorder');
alert('最多的姓氏是[' + _firstName + ']');
}; var randomDelete10Rows = function(){
for (var i = 0; i < 10; i++) {
randomDeleteRow();
}
}; var randomDeleteRow = function() {
var rows = table.find('tr').length;
var _num = randomNumber(0, rows - 2);
table.find('tr').eq(_num).remove();
recssTable();
}; var change23 = function() {
table.find('tr').each((i, ele) => {
$(ele).find('td:eq(1)').before($(ele).find('td:eq(2)'));
});
var _temp = nameIndex;
nameIndex = ageIndex;
ageIndex = _temp;
}; var names5to10 = function() {
var users = table.find('tr:gt(3):lt(6)').map((i,ele) => {return {name:$(ele).find('td:eq(' + nameIndex+ ')').text(), age: parseInt($(ele).find('td:eq('+ageIndex+')').text())}}).get()
var map = {};
users.forEach(user => {
if (!map[user.name]) {
map[user.name] = {
name : user.name,
ages : user.age
}
} else {
map[user.name].ages += user.age;
}
});
alert(JSON.stringify(Object.values(map)));
}; var createButton = function(name, _event_){
var button = $('<input/>', {type:'button', value:name, style:'font-size:20px;'});
button.bind('click', _event_);
buttons.append(button);
}; var createTable = function () {
table = $('<table/>', {class:'table', style:'margin:10px auto;'});
createRandomUsers();
$('body').append(table); recssTable();
}; var recssTable = function() {
table.find('.evenTr').removeClass('evenTr');
table.find('tr:even').addClass('evenTr');
}; var createRandomUsers = function () {
var nums = randomNumber(50, 99);
for (var i = 0; i < nums; i++) {
createRandomUser();
}
}; var createRandomUser = function () {
var tr = $("<tr/>");
var id = __id__;
__id__ ++;
var name = randomName();
var age = randomNumber(0, 99);
createTd(tr, $('<input/>', {type:'checkbox', value:id}));
createTd(tr, name);
createTd(tr, age);
var deleteButton = $('<input/>', {type :"button", value:'Delete', style:'width:100px;'});
deleteButton.bind('click', function(){
tr.remove();
recssTable();
});
createTd(tr, deleteButton);
table.append(tr);
}; var createTd = function(tr, child) {
var td = $("<td/>", {style:'height:30px; line-height:30px;'});
td.append(child);
tr.append(td);
}; var randomName = function(){
return firstNames[randomNumber(0, 9)] + lastNames[randomNumber(0, 19)];
}; var randomNumber = function(min, max) {
return Math.floor(Math.random() * (max - min)) + min + 1;
} init();
});
</script>
</body> </html>

  

jquery作业 教授答案的更多相关文章

  1. JQuery面试题答案

    jQuery面试题答案 转自:http://blog.csdn.net/zhangpei_xf/article/details/8822021 一.Jquery测试题 下面哪种不是jquery的选择器 ...

  2. 与左侧的 圆括号“(”(位于“e:\大二上课程课件、作业和答案\数据结构\chapter4\sqstack\sqstack\mysqstack.h(23)”)匹配之前遇到文件结束

    错误原因是“某对圆括号只打了左括号而没有右括号”,debug方法是:直接根据报错提示:“与左侧的 圆括号“(”(位于“e:\大二上课程课件.作业和答案\数据结构\chapter4\sqstack\sq ...

  3. java第一天学习作业及答案

    作业一 一.选择题 1.选出在java中有效的注释声明(AD)(选两项) A.//这是注释 B.*/这是注释*/ C./这是注释 D./*这是注释*/ 2.在控制台运行一个java程序,使用的命名正确 ...

  4. jquery作业

    1. 通过jquery动态的创建一个表格,随机生成(id自增,name随机2-3个中文汉字(10个姓,20个名字),age随机100以内整数)大于50小于100行的数据(用户对象:id,name,ag ...

  5. jQuery 作业三个按钮

    作业三个按钮 <!--声明 文档--> <!DOCTYPE html> <!--定义字符集--> <html lang="zh-CN"&g ...

  6. jQuery作业 点击显示

    代码如下: 里: 导入jQuery包: 里:内容 水果 苹果 橘子 梨子 香蕉 化妆品 口红 眼影 腮红 高光 护肤品 水 乳 霜 精华

  7. CSAPP深入理解计算机系统(第二版)第三章家庭作业答案

    <深入理解计算机系统(第二版)>CSAPP 第三章 家庭作业 这一章介绍了AT&T的汇编指令 比较重要 本人完成了<深入理解计算机系统(第二版)>(以下简称CSAPP) ...

  8. JQUERY 测验

    1.下面哪种说法是正确的? 您的回答:jQuery 是 JSON 库 正确答案:jQuery 是 JavaScript 库 2.jQuery 使用 CSS 选择器来选取元素? 您的回答:错误 正确答案 ...

  9. jquery常见问题

    1.下面哪种说法是正确的? 您的回答:jQuery 是 JavaScript 库 2.jQuery 使用 CSS 选择器来选取元素? 您的回答:错误 正确答案:正确 3.jQuery 的简写是? 您的 ...

随机推荐

  1. nltk模块基础操作

     几个基础函数 (1)搜索文本:text.concordance(word) 例如,在text1中搜索词”is”在文本中出现的次数以及上下文的词:text1.concordance("is& ...

  2. EBS 多组织访问设置

    如果想让你的职责下为单组织模式,那么你在Profile下只设置MO: Operating Unit的值,MO: Operating Unit提供只访问一个单独的OU.如果你想让你的职责下为多组织模式, ...

  3. hdu6000 Wash ccpc-20162017-finals B Wash

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6000 题目: Wash Time Limit: 20000/10000 MS (Java/Ot ...

  4. uva12083 二分图 求最大独立集 转化为求最大匹配 由题意推出二分图

    这题大白书例题 : Frank 是一个思想有些保守的高中老师,有一次,他需要带一些学生出去旅行,但又怕其中一些学生在旅途中萌生爱意.为了降低这种事情的发生概率,他决定确保带出去的任意两个学生至少要满足 ...

  5. Java设计模式应用——观察者模式

    告警结果产生后,可能需要发送短信,邮件,故障管理系统.这些转发操作不应当影响告警生成入库,并且类似事件可能根据不同场景,客户习惯不同,此时,使用观察者模式则可以很好的适应上述场景. 观察者模式应当包括 ...

  6. 根据wsdl,apache cxf的wsdl2java工具生成客户端、服务端代码

    根据wsdl,apache cxf的wsdl2java工具生成客户端.服务端代码 apache cxf的wsdl2java工具的简单使用: 使用步骤如下: 一.下载apache cxf的包,如apac ...

  7. Java的各种加密算法

    Java的各种加密算法 JAVA中为我们提供了丰富的加密技术,可以基本的分为单向加密和非对称加密 1.单向加密算法 单向加密算法主要用来验证数据传输的过程中,是否被篡改过. BASE64 严格地说,属 ...

  8. 10:Python2与Python3比较

    1.print 函数 1. print语句没有了,取而代之的是print()函数. Python 2.6与Python 2.7部分地支持这种形式的print语法. 2.Unicode 1.  在pyt ...

  9. 多态时最好将基类的析构函数设为virtual、 C++中两个类相互包含引用问题 (转载)

    多态:http://blog.csdn.net/tmljs1988/article/details/8146521 C++中两个类相互包含引用问题:http://blog.csdn.net/leo11 ...

  10. Python之GUI的最终选择(Tkinter)

    首先,Tkinter是Python默认的GUI库,想IDLE就是用Tkinter设计出来的,因此直接导入Tkinter模块就可以啦 1 import tkinter (1)Tkinter初体验: 1 ...