主要技术:一、运用php获取数据库的数据,并将数据转化为二维数据的形式’,运用json_encode() 对数组变量进行JSON编码。二、在js中将php数组转化为js数组并使用eval()解析数组数据,通过for循环动态创建表格并添加相应的css样式使表格更加美观。
代码:php部分:
<?php
require_once "..\MyPhp\MySqlConnect.php";
mysqli_query($conn , "set names utf8");
//学生信息二维数组
$memberinfo=null;
$memberinfos=null;
$i=0;
$sql = "Select examanswer.tno,testpaper.tname,examanswer.mno,members.mname
,examinfo.startime,examinfo.endtime,examinfo.location
from examanswer,testpaper,examinfo,members
WHERE testpaper.tno=examanswer.tno and examinfo.tno=examanswer.tno
and examinfo.mno=examanswer.mno
and members.mno=examanswer.mno
group by examanswer.tno,examanswer.mno
";
$result = mysqli_query($conn,$sql);
while ($row = mysqli_fetch_assoc($result)) {
$memberinfo[0] = $row['tno'];
$memberinfo[1] = $row['tname'];
$memberinfo[2] = $row['mno'];
$memberinfo[3] = $row['mname'];
$memberinfo[4] = $row['startime'];
$memberinfo[5] = $row['endtime'];
$memberinfo[6] = $row['location'];
$memberinfos[$i++] = $memberinfo;
}
$resultsArray=json_encode($memberinfos, JSON_UNESCAPED_UNICODE);
mysqli_close($conn);
?>
js部分: /* js获取json二维数 let results=
/*定于初始化表头数组*/
let TheArray=new Array("试卷编号","考试名称","学号","学生姓名","开始时间","结束时间","考试地点","查看成绩");
//创建表头
function createTab() {
let topTab=document.createElement("table");
let MyDiv =document.getElementById ('center');
let len=TheArray.length;
let title = document.createElement("h1");
title.innerHTML="学生考试信息表";
let refreshButton=document.createElement("button");
refreshButton.setAttribute("value","提交答案");
refreshButton.setAttribute("id","sub");
refreshButton.setAttribute("class","layui-btn layui-btn-lg layui-btn-normal");
refreshButton.setAttribute("onclick","checkfill()");
let br=document.createElement("br");
for(let i=0;i<1;i++){
tr=topTab.insertRow(i);
for(let j=0;j<len;j++){
td =topTab.rows[i].insertCell(j);
td.style.cssText = "BORDER: \n" +
" \n" +
" #d2d2d2 1px solid ;" +
"width:124px;height:50px; ali; text-align: center;";
td.innerHTML=TheArray[j];
topTab.rows[i].cells[j].style .background='#f2f2f2';
}
}
MyDiv.appendChild(title);
MyDiv.appendChild(br);
MyDiv.appendChild(refreshButton);
return topTab;
}
//创建第二个表格
function installcard() {
let jsonstr =eval(results);
let MyDiv =document.getElementById ('center');
let tab= document.createElement("table");
tab.setAttribute("id","mytable");
let topTab=createTab();
for (let i = 0; i < jsonstr.length; i++) {
tab.insertRow(i);
for (let j =0; j<=jsonstr[i].length; j++) {
td = tab.rows[i].insertCell(j);
td.style.cssText = "BORDER: #d2d2d2 1px solid;" +
"width:124px;height:50px;text-align:center;"
if(j<jsonstr[i].length){
td.innerText = jsonstr[i][j];
tab.rows[i].cells[j].style.background = 'snow';
}else if(j==jsonstr[i].length)
{
let id = jsonstr[i][0];
let mno= jsonstr[i][2];
let connect="<a href='Examgrade.php?tno="+id+"&mno="+mno+" 'style='color:#01AAED'>编辑成绩</a>";
td.innerHTML=connect;
tab.rows[i].cells[j].style.background = 'snow';
}
}
}
MyDiv.appendChild(topTab);
MyDiv.appendChild(tab);
}