码迷,mamicode.com
首页 > 其他好文 > 详细

案例:动态生成表格

时间:2020-05-21 23:48:15      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:开始   ref   child   数组   链接   ack   round   data   asc   

<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>

 

案例:动态生成表格

标签:开始   ref   child   数组   链接   ack   round   data   asc   

原文地址:https://www.cnblogs.com/zcy9838/p/12934222.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!