SOURCE

//准备数据(模拟数据库)
var datas=[
    {
        name:'Pink',
        subject:'WebService',
        score:89
    },
    {
        name:'OwFFF',
        subject:'Javascript',
        score:100
    },
    {
        name:'Eiowv',
        subject:'English',
        score:133
    },
    {
        name:'Pink',
        subject:'WebService',
        score:89
    },
    {
        name:'Zee22c',
        subject:'Javascript',
        score:59
    },
    {
        name:'X331',
        subject:'Javascript',
        score:75
    }
]
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');
        //数据填充
        td.innerHTML=datas[i][k];
        tr.appendChild(td);
    }
    var td=document.createElement('td');
    //删除按钮
    td.innerHTML='<a href="javascriot:;">删除</a>'
    tr.appendChild(td);
}
//删除按钮功能实现
var as=document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
    as[i].onclick=function(){
        tbody.removeChild(this.parentNode.parentNode);
    }
}

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color:red;
}
table{
    width: 500px;
    height: 100px;
    border-collapse: collapse;
    text-align: center;
}

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

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