考试的时候经常用到，发在这里记录一下
基本信息包括： 学号、姓名、题号、题目名称
实现原理：给每一个题目添加一个编号，JS生成随机数，遍历每一个学生，把题目根据生成的随机数作为题目编号放入学生信息中
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table{
width: 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:\'长方形幻灯片\'};