<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 50px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        #userInfo {
            width: 200px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div id="userInfo">
        学生姓名:<input type="text" name="" id="name" value=""><br />
        学生科目:<input type="text" name="" id="subject" value=""><br />
        学生分数:<input type="text" name="" id="score" value=""><br />
        <button id="add">添加</button>
    </div>
  </body>
  <script type="text/javascript">
     var datas=[{
        name:"甲",
        subject:"javascript",
        score:100
    },{
        name:"乙",
        subject:"javascirpt",
        score:99
    },{
        name:"丙",
        subject:"javascript",
        score:98
    },{
        name:"丁",
        subject:"javascript",
        score:98
    },{
        name:"酋",
        subject:"javascript",
        score:98
    }];
    var tbody=document.querySelector("tbody");     //获取tbody标签
    for(var i=0;i<datas.length;i++){              //for遍历数组datas
        var tr=document.createElement("tr");      // 创建tr标签
        tbody.appendChild(tr);                      //  添加tr节点标签
        for(var k in datas[i]){                   //  for  in  分别取出里面的值
            var td=document.createElement("td");      //创建td标签
            tr.appendChild(td);                     //  tr内创建td节点 标签
            td.innerHTML=datas[i][k];              //  数组遍历出的分别添加到td内
        }
        var tdd=document.createElement("td");       //   在创建td标签节点
        tr.appendChild(tdd);                         
        tdd.innerHTML="<a href='javascript:;'>删除</a>"    //td内添加a标签   
    }
    var sc=document.querySelectorAll("a");               //获取所有a标签
      for(var j=0;j<sc.length;j++){                        //遍历出 a标签 
        sc[j].onclick=function(){                           //为遍历出的a标签添加点击事件    
            tbody.removeChild(this.parentNode.parentNode);    //点击删除当前a标签 父级的父级
       }
      }
      
      
      var add=document.getElementById("add");
      
     
       add.onclick=function(){
        var nam=document.getElementById("name").value;
      var subject=document.getElementById("subject").value;
      var score=document.getElementById("score").value;
        var obj = {
                name:nam,
                subject:subject,
                score:score
            }
     
     var arr=[];                                        //创建空数组
            arr.push(obj);                              //将字符串obj添加到数组内
            for(var i=0;i<arr.length;i++){              //for循环遍历数组  创建tr
        var tr=document.createElement("tr");      // 创建tr标签
        tbody.appendChild(tr);
           for(var m in arr[i]){
            var td=document.createElement("td");      //创建td标签
            tr.appendChild(td);                     //  tr内创建td节点 标签
            td.innerHTML=arr[i][m];
           }
            }
      var tdd=document.createElement("td");         //   在创建td标签节点
        tr.appendChild(tdd);
        tdd.innerHTML="<a href='javascript:;'>删除</a>"    //td内添加a标签  
        var sc=document.querySelectorAll("a");               //获取所有a标签
      for(var j=0;j<sc.length;j++){                        //2遍历出 a标签 
        sc[j].onclick=function(){                           //为遍历出的a标签添加点击事件
            tbody.removeChild(this.parentNode.parentNode);    //点击删除当前a标签 父级的父级
       }
      }
    }

  </script>
  </html>