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. VirtualBox 虚拟磁盘的UUID修改

    个人测试环境,想构建一套Standby RAC环境,不想再重复去安装系统浪费时间,直接复制之前安装RAC前的一套VirtualBox的虚拟环境,不过打开时报错: 未能打开位于 Z:\Vbox\Stan ...

  2. POJ 3461 Oulipo(KMP,模式串在主串中出现次数 可重叠)

    题意:给你两个字符串p和s,求出p在s中出现的次数. 显然,我们要先把模式串放到前面,之后主串放后面,中间隔开,这样就可以根据前缀数组的性质来求了. 我先想直接把p接到s前面,之后求Next数组对st ...

  3. Codeforces Round #440 (Div. 2, based on Technocup 2018 Elimination Round 2) C. Maximum splitting

    地址: 题目: C. Maximum splitting time limit per test 2 seconds memory limit per test 256 megabytes input ...

  4. 缓存(图像 IO 14.2)

    缓存 如果有很多张图片要显示,最好不要提前把所有都加载进来,而是应该当移出屏幕之后立刻销毁.通过选择性的缓存,你就可以避免来回滚动时图片重复性的加载了. 缓存其实很简单:就是存储昂贵计算后的结果(或者 ...

  5. Java面向对象---接口

    接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并不是类,编写接口 ...

  6. 20165207 Exp4 恶意代码分析

    目录 1.实验内容 1.1.系统运行监控 1.1.1.使用命令行创建计划任务 1.1.2.使用命令行借助批处理文件创建计划任务 1.1.3.分析netstat计划任务的最终结果 1.1.4.安装配置s ...

  7. 在线js调试工具JSbin、jsFiddle

    在线js调试工具JSbin.jsFiddle JS Bin - Collaborative JavaScript Debugginghttp://jsbin.com/?html,output这个在线j ...

  8. SNMP学习笔记之SNMPWALK 安装与使用详解

    0x00 简介 snmpwalk是SNMP的一个工具,它使用SNMP的GETNEXT请求查询指定OID(SNMP协议中的对象标识)入口的所有OID树信息,并显示给用户.通过snmpwalk也可以查看支 ...

  9. finedb（内置的HSQL数据库）迁移数据到MySQL

    finedb(内置的HSQL数据库)迁移数据到MySQL 1. 前言 在FineBI中,决策平台的数据(用户.角色.组织机构.权限等信息)是存储在finedb数据库中的,默认情况下finedb是一个内 ...

  10. 20145205武钰《网络对抗》web安全基础实践

    实验后问题回答 (1)SQL注入攻击原理,如何防御 攻击原理:SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意SQL命令的目的 防御手 ...