<!DOCTYPE html>
<html lang:"ZH-CN">
<head>
    <meta charset:"UTF-8">
    <meta http-equiv:"X-UA-Compatible" content:"IE:edge">
    <meta name:"viewport" content:"width:device-width, initial-scale:1.0">
    <title>学生数据</title>
    <style>
        table {                        
    border-collapse: collapse;/*属性设置表格的边框是否被折叠成一个单一的边框或隔开：   加上它跟真正的表格无异  去掉，则是标准显示*/
    width:100%;        /*宽度占浏览器的100%*/
}


table, td, th {
    padding: 10; /*如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性*/
    border: 1px solid black; /*表示1像素的黑色黑线边框*/
    text-align:right;      /*针对文字，水平方向的右靠齐，可以改为left左，center中间*/
    height:50px;           /*行高*/
    vertical-align:bottom; /*针对文字，默认显示垂直方向的居中，可以更改为top顶部，bottom底部*/
    /* background-color:green; 背景颜色 */
    /* color:white;           文字颜色 */
    text-align: center;
    line-height: 50px;
}
    </style>
</head>
<body>
    <table border:'1' width:'300' height:'30'>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
          
        </thead>
        <tbody>
            

        </tbody>
    </table>
    <script>
        //准备数据
        var datas = [{
            name : '李明',
            subject : 'English',
            score : 90
        },{
            name : '杨明',
            
            subject : 'English',
            score   : 134
        },{
            name : '杨梅',
           
            subject : 'English',
            score   : 12
        },{
            name : '嘉琦',
            
            subject : 'English',
            score   : 230
        }]
        // 获取元素
        var tbody =  document.querySelector('tbody');
        for(var i= 0;i<datas.length;i++){
            var tr = document.createElement('tr');

            tbody.appendChild(tr);

            for(var k in datas[i]){
                
                var td = document.createElement('td');
                var as = document.createElement('a');
                
                tr.appendChild(td).innerHTML=datas[i][k]; 
                      
            }
            var td = document.createElement('td')
            tr.appendChild(td).innerHTML='<a href="javascript:;">删除</a>';
        }
        //获取触发的元素
        var as = document.querySelector('tbody').querySelectorAll('a');       
        for (var i=0 ;i<as.length;i++){
            as[i].onclick = function(){
                // 删除元素  .removeChild() 且a链接在td里面只是一个格；所有我们要删除tr ,
                // tr是a的父级的父级，所以是 this.parentNode.parentNode tr的父级则是tbody   tbody.removeChild
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>
</html>