js动态创建表格

js动态创建表格

1、 循环数据条数，来生成行

2、循环对象中的属性，来生成列，再把对应的值放入列中，再添加到行上

3、再创建删除按钮

// 1.先去准备好学生的数据
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];
         var tbody = document.querySelector('tbody')
        // 循环数据条数，来生成行
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr')
            tbody.appendChild(tr)
            // 循环对象中的属性，来生成列，再把对应的值放入列中，再添加到行上
            for (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="javascript:;">删除</a>'
            tr.appendChild(td)
            var a = document.querySelectorAll('a')
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    tbody.removeChild(this.parentNode.parentNode)
                }
            }

        }