考试的时候经常用到，发在这里记录一下
基本信息包括： 学号、姓名、题号、题目名称
实现原理：给每一个题目添加一个编号，JS生成随机数，遍历每一个学生，把题目根据生成的随机数作为题目编号放入学生信息中
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table{
1000px;
margin: 50px auto;
border-collapse: collapse;
line-height: 30px;
text-align: center;
}
caption{
font-size: 30px;
letter-spacing: 5px;
line-height: 50px;
}
th,td{
border: 1px #66667d solid;
}
</style>
<body>
<table>
<caption>随机选题</caption>
<thead>
<th>学号</th>
<th>姓名</th>
<th>题号</th>
<th>题目名称</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
<template id="temp1">
<tr>
<td>{{student}}</td>
<td>{{student_name}}</td>
<td>{{topic}}</td>
<td>{{topic_name}}</td>
</tr>
</template>
<script src="js/data.js"></script>
<script>
var htmlText='';
var tbody=document.getElementById('tbody');
var str=document.getElementById('temp1').innerHTML;
var i,len=topic.length,arr=[];
// 模板方法，适用于文本结构复杂情况
student.forEach(function (el) {
i=parseInt(Math.random()*len);
arr.push(str.replace('{{student}}',el.no).replace('{{student_name}}',el.name)
.replace('{{topic}}',topic[i].no).replace('{{topic_name}}',topic[i].name));
});
tbody.innerHTML=arr.join('');
// 常用方法
// student.forEach(function (el) {
// i=parseInt(Math.random()*len);
// htmlText+= '<tr><td>'+el.no+'</td><td>'+el.name+'</td><td>'+topic[i].no+'</td><td>'+topic[i].name+'</td></tr>'
// });
// tbody.innerHTML=htmlText;
</script>
</body>
</html>
学生数据表：
var student=[];
student[student.length]={no:'201658234069',name:'喜羊羊'};
student[student.length]={no:'201658234050',name:'李二'};
student[student.length]={no:'201658234066',name:'刘蛋蛋'};
student[student.length]={no:'201658234055',name:'李白'};
student[student.length]={no:'201658234056',name:'陆游'};
student[student.length]={no:'201658234057',name:'白居易'};
student[student.length]={no:'201658234058',name:'杜甫'};
student[student.length]={no:'201658234059',name:'李清照'};
student[student.length]={no:'201658234060',name:'苏轼'};
student[student.length]={no:'201658234063',name:'王安石'};
student[student.length]={no:'201658234064',name:'杜牧'};
student[student.length]={no:'201658234065',name:'邱清泉'};
student[student.length]={no:'201658234067',name:'辛弃疾'};
student[student.length]={no:'201658234068',name:'孟浩然'};
student[student.length]={no:'201658234069',name:'杨万里'};
student[student.length]={no:'201658234070',name:'欧阳修'};
student[student.length]={no:'201658234058',name:'范仲淹'};
student[student.length]={no:'201658234059',name:'王维'};
student[student.length]={no:'201658234060',name:'陶渊明'};
student[student.length]={no:'201658234063',name:'诗经'};
student[student.length]={no:'201658234064',name:'黄庭坚'};
student[student.length]={no:'201658234065',name:'屈原'};
student[student.length]={no:'201658234067',name:'司马迁'};
student[student.length]={no:'201658234068',name:'袁枚'};
student[student.length]={no:'201658234069',name:'韩非'};
student[student.length]={no:'201658234070',name:'范成大'};
var topic=[];
topic[topic.length]={no:'1',name:'event测试'};
topic[topic.length]={no:'2',name:'flash动画框架'};
topic[topic.length]={no:'3',name:'仿土豆天气预报'};
topic[topic.length]={no:'4',name:'发微博'};
topic[topic.length]={no:'5',name:'右键菜单'};
topic[topic.length]={no:'6',name:'回车提交留言'};
topic[topic.length]={no:'7',name:'完美运动框架'};
topic[topic.length]={no:'8',name:'延时提示框'};
topic[topic.length]={no:'9',name:'数字时钟'};
topic[topic.length]={no:'10',name:'滚动条'};
topic[topic.length]={no:'11',name:'简易日历'};
topic[topic.length]={no:'12',name:'虚框拖拽'};
topic[topic.length]={no:'13',name:'表单'};
topic[topic.length]={no:'14',name:'运行代码'};
topic[topic.length]={no:'15',name:'键盘事件游戏'};
topic[topic.length]={no:'16',name:'长方形幻灯片'};