js动态生成表格（添加删除行操作）

HTML

tbody标签为空

<table class="mt">
        <thead>
            <tr>
                <td>标题</td>
                <td>标题</td>
                <td>标题</td>
                <td>标题</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
 </table>

CSS

  table.mt {
        width: 600px;
        margin: 100px auto;
        text-align: center;
        border-spacing: 0px;
        border-right: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
    }
    
    table.mt td {
        border-left: 1px solid #aaa;
        border-top: 1px solid #aaa;
        padding: 10px;
    }
    
    table.mt thead tr {
        background: #339;
        color: #fff;
    }

js动态生成表格，并且添加删除操作

<script>
    // 1、数据
    var datas = [{
        name: '熊大',
        subject: 'JavaScript',
        score: 88,
    }, {
        name: '熊二',
        subject: 'JavaScript',
        score: 78,
    }, {
        name: '小胖',
        subject: 'JavaScript',
        score: 68,
    }, {
        name: '光头强',
        subject: 'JavaScript',
        score: 98,
    }, ];
    // 2、tbody里面创建行
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++) {
        //建行
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        // 3、建单元格
        for (var k in datas[i]) {
            var td = document.createElement('td');
            // console.log(datas[i][k]);
            td.innerHTML = datas[i][k];
            tr.appendChild(td);
        }
        // 4、创建删除操作
        var td = document.createElement('td');
        td.innerHTML = '<button>删除</button>'
        tr.appendChild(td);
    }
    // 5、删除操作
    var button = document.querySelectorAll('button')
    for (var i = 0; i < button.length; i++) {
        // 删除所在的行(button的父级的父级)   node.removeChild(child)
        button[i].onclick = function() {
            // 行的父级为tbody
            tbody.removeChild(this.parentNode.parentNode)
        }
    }

    // for( var k in obj){
    //     k得到属性值名
    //     obj[k]属性值
    // }
</script>