zoukankan      html  css  js  c++  java
  • 案例:动态生成表格

    <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>
  • 相关阅读:
    positio:absolute与position:relative的区别
    angular过滤器
    docker常用命令
    Promise的用法
    import和require
    webStrom支持Vue
    搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境
    需要转义的正则表达式符号
    改变input光标颜色与输入字体颜色不同
    网络编程套接字,osi七层架构各层协议最全讲解
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12934222.html
Copyright © 2011-2022 走看看