动态创建表格

（一）html基本框架

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

tbody 标签里不要添加内容，里面的内容是可变的，在script添加相应的内容

（二）css装饰

* /* 清除浏览器的默认值，便于之后自行设置的margin 与padding不受干扰 */
        * {
            margin: 0;
            padding: 0;
        }
        table {
            width: 320px;
            margin: 20px auto;
            border-collapse: collapse;
            text-align: center;
        }
        table,tr,td,th {
            border: 1px solid #E1E1E1;
        }
        td {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        thead>tr {
            background: #f0f0f0;
        }
 

上述代码展示效果如下

（三）JavaScript实现动态创建表格

（1）添加数据 数组中存放对象，每一个对象里的每一个属性的内容都是 单元格 td 里的内容

var information=[
        {
            name:'王small明',
            subject:'python1.0',
            grade: '99.9'
        },
        {
            name:'王middle明',
            subject:'python2.0',
            grade: '99.99'
        },
        {
            name:'王big明',
            subject:'python3.0',
            grade: '99.999'
        },
        {
            name:'王great明',
            subject:'python3.0',
            grade: '99.999'
        },
        ]

（2）创建 tr 及tr里的td，以及添加相应内容

var tbody = document.querySelector('tbody');
        for(var i=0;i<information.length;i++){
            //  创建行数
            tr = document.createElement('tr');
            tbody.appendChild(tr);
            //  创建 单元格
            // 依次遍历每一组对象，也就是每一行的内容
            for(var k in information[i]){
                // 创建 td 标签
                var td = document.createElement('td');
                //  给td 单元格里 添加内容
                td.innerHTML = information[i][k];
                // 将含有内容的单元格，添加到td的父元素tr（td所在的那一行）
                tr.appendChild(td);
            }
            var td = document.createElement('td');
            // 阻止“删除”链接跳转，只需要它能实现“删除的作用”
            td.innerHTML = "<a href='javascript:;'>删除</a>";
            tr.appendChild(td);
        }

代码展示

（3）让“删除”健实现真正的删除

// 在上面中，向td中添加了 a，获取a元素
        var as = document.querySelectorAll('a');
        var tbody = document.querySelector('tbody');
        for( var i= 0;i<as.length;i++){
            as[i].onclick = function() {
                // a < td < tr < tbody
                //removeChild 删除元素
            tbody.removeChild(this.parentNode.parentNode);
        }
        }

上一段代码中最后一行 ，点击删除，需要这一行都消失，this指向a，a.parentNode指向td，td.par
entNode指向tr，tbody是tr的父元素，从而实现删除
（4）展示
点击第一行的删除：
第一行消失

自行添加内容：

{
            name:'王enormous明',
            subject:'python3.0',
            grade:'99.9999'
        },

以下是对tbody的样式

/* 让奇数行 偶数行呈现不一样的颜色，利用 odd even 简化 */
        tbody tr:nth-child(odd){
            background: #FBFBFB;
        }
        tbody tr:nth-child(even){
            background: #f0f0f0;
        }
        a {
            text-decoration: none;
            color: #666699;
        }

本次分享就到这儿了！