https://www.bilibili.com/video/BV1X441147tL/?spm_id_from=333.788.videocard.10

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <link rel="stylesheet" type="text/css" href="css/list.css">
    7.     <script type="text/javascript" src="js/jquery.min.js"></script>
    8.     <script type="text/javascript" src="showStaff.js"></script>
    9.     <title>招聘教师名单</title>
    10. </head>
    11. <body>
    12.     <div class="CssDiv">
    13.         <div class="CssListTitle">
    14.             <input type="button" id="zmAdd" value="添加" class="button">
    15.         </div>
    17.         <div class="CssListDiv" id="DivList">
    18.             <!-- 这里的html通过js动态加载 -->
    19.         </div>
    20.     </div>
    21.     <a href="http://si.ahu.edu.cn/2020/0509/c14324a234839/page.htm" target="_blank">内容链接</a>
    22. </body>
    23. </html> 
    24. <script>
    25.     ShowStaffList();
    26. </script>
    1. // staffList：教师名单
    2. var staffList = [
    3.     {
    4.         "name": "江东",
    5.         "gender": "男",
    6.         "major": "计算机技术"
    7.     },
    8.     {
    9.         "name": "吴文明",
    10.         "gender": "男",
    11.         "major": "数学"
    12.     },
    13.     {
    14.         "name": "焦绪国",
    15.         "gender": "男",
    16.         "major": "控制科学"
    17.     },
    18.     {
    19.         "name": "杨晓晗",
    20.         "gender": "女",
    21.         "major": "通信工程"
    22.     },
    23.     {
    24.         "name": "马萍",
    25.         "gender": "女",
    26.         "major": "机械电子工程"
    27.     },
    28.     {
    29.         "name": "董天云",
    30.         "gender": "男",
    31.         "major": "机械电子工程"
    32.     }
    33. ];
    35. var myHtml = `
    36.     <table class="CssTable">
    37.         <tr>
    38.             <td class="tdHeadCenter">序号</td>
    39.             <td class="tdHeadCenter">姓名</td>
    40.             <td class="tdHeadCenter">性别</td>
    41.             <td class="tdHeadCenter">专业</td>
    42.             <td class="tdHeadCenter">操作</td>
    43.         </tr>
    44. `
    46. function ShowStaffList(){
    47.     if (staffList.length > 0){
    48.         var order = 0;
    50.         for(var i = 0; i < staffList.length; i++){
    51.             var staffName = staffList[i].name;
    52.             var staffGender = staffList[i].gender;
    53.             var staffMajor = staffList[i].major;
    55.             order++;
    57.             myHtml += `
    58.                 <tr>
    59.                     <td> ${order} </td>
    60.                     <td> ${staffName} </td>
    61.                     <td> ${staffGender} </td>
    62.                     <td> ${staffMajor} </td>
    63.                     <td>
    64.                         <img src=picture/edit.png title=编辑 style=cursor: pointer; >
    65.                         <img src=picture/del.png title=删除 style=cursor: pointer; >
    66.                     </td>            
    67.                 </tr>
    68.             `
    69.         }
    71.         myHtml += "</table>";
    73.         $("#DivList").html(myHtml);
    74.     }
    75. }