运用js动态生成好看的table

主要技术：一、运用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);
    }