案例：动态生成表格

Posted 2020-11-30 zcy9838

<script>
    // 1. 先准备好学生的数据
    var datas = [{
        name: ‘张三‘,
        subject: ‘javascript‘,
        score: 100
    }, {
        name: ‘李四‘,
        subject: ‘JavaScript‘,
        score: 98
    }, {
        name: ‘王五‘,
        subject: ‘JavaScript‘,
        score: 99
    }, {
        name: ‘赵六‘,
        subject: ‘JavaScript‘,
        score: 88
    }];
    
    // 2. 往tbody里面创建行：有几个人（通过数组的长度）就创建几行
    var tbody = document.querySelector(‘tbody‘);
    for (var i = 0; i < datas.length; i++) {  // 外面的for循环管行tr
        // 创建tr行
        var tr = document.createElement(‘tr‘);
        tbody.appendChild(tr);
        // 行里面创建单元格td，单元格的数量取决于每个对象里面的属性个数，for循环遍历对象datas[i]
        for (var k in datas[i]) { // 里面的for循环管列td
            // 创建单元格
            var td = document.createElement(‘td‘);
            // 把对象里面的属性值data[i][k]给td
            td.innerhtml = data[i][k];
            tr.appendChild(td);
        }
        // 3. 创建有删除2个字的单元格
        var td = document.createElement(‘td‘);
        td.innerHTML = ‘<a href="javascript:;">删除</a>‘;
        tr.appendChild(td);
    }
    // 4. 删除操作开始
    var as = document.querySelectorAll(‘a‘);
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function() {
            // 点击a，删除当前a所在的行（链接的父元素的父元素）
            tbody.removeChild(this.parentNode.parentNode);
        }
    }
</script>