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 {
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:'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>