JS 动态生成表格案例

css代码

 table {
            border: 1px solid black;
            margin: 0 auto;
            width: 400px;
        }

        #thead {
            height: 50px !important;
            line-height: 50px;
            background-color: #e8e8e8;
        }

        tbody tr {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        tbody tr a {
            color: red;
        }

 

 

HTML代码

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

 

JS代码

    var datas = [{
            name: '意思是',
            subject: 'js',
            score: '100',

        }, {
            name: '张三',
            subject: 'js',
            score: '98',

        },
        {
            name: '李四',
            subject: 'js',
            score: '95',

        },
        {
            name: '李三',
            subject: 'js',
            score: '94',

        },
    ]
    // 向tbody里面创建行  通过数组的长度判断需要多少行
    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
            td.innerHTML = datas[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 i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            // 删除当前a所在的行的父节点
            tbody.removeChild(this.parentNode.parentNode)
        }
    }

 效果图