javascript动态生成表格 -- 案例

表格内容使用js生成

效果预览

html部分

<table border="1px" cellspacing="0" cellpadding="10">
    <thead>
    <tr style="background-color: #999999; height: 60px">
        <td>姓名</td>
        <td style="width: 150px">科目</td>
        <td>成绩</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

css部分

    <style>
        table {
            text-align: center;
        }
    </style>

js部分

<script>
    //准备好学生的数据
    var dates = [
        {
            name: '吴彦祖',
            subject: 'javaScript',
            score: 100
        },
        {
            name: '孔智超',
            subject: 'javaScript',
            score: 80
        },
        {
            name: '栗志青',
            subject: 'javaScript',
            score: 60
        },
        {
            name: '姚小煜',
            subject: 'javaScript',
            score: 40
        }
    ]
    //先获取tbody
    var tbody = document.querySelector('tbody')
    for (var i = 0; i < dates.length; i++) {
        //创建tr元素
        var tr = document.createElement('tr')
        tbody.appendChild(tr)
        //给行里面添加td
        for (var k in dates[i]) {
            var td = document.createElement('td')
            //给td添加内容
            for (var s in dates[i]) {
                td.innerHTML = dates[i][k]
            }
            tr.appendChild(td)
        }
        //创建删除单元格
        var td = document.createElement('td')
        td.innerHTML = "<a href='javascript:;'>删除</a>"
        tr.appendChild(td)
    }
    var as = document.querySelectorAll('a')
    for (var j = 0; j < as.length; j++) {
        //获取删除链接
        as[j].onclick = function () {
            //删除节点
            tbody.removeChild(this.parentNode.parentNode)
        }
    }
</script>