jquery作业 教授答案

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>

　　

posted @ 2018-04-27 14:51  巴黎爱工作  阅读(329)  评论(0)  编辑  收藏  举报