JavaScript节点的操作，综合运用———动态模拟表格添加和删除数据

模拟在表格中动态添加和删除数据；

1.首先网页骨骼

<table cellspacing="0">

<thead>

<tr>

<th>姓名</th>

<th>科目</th>

<th>成绩</th>

<th>操作</th>

</tr>

</thead>

<tbody>

2.模拟一组数据 使用对象来存储数据，并且用一个数据用来保存多个对象

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

}];

3.给tbody里面增加tr，而tr的数量是由对象的数量决定，所以就是数组的长度 datas[i]；因为是多个所以需要用到循环，循环来创建tr

/* 先获取相应的对象*/

var tbody = document.querySelector('tbody');

for (var i = 0; i < datas.length; i++) {

// 1. 创建tr

var tr = document.createElement('tr');

//将tr添加到tbody里面

tbody.appendChild(tr);

4.创建td 而td的数量是由对象中的属性数量决定，所以需要遍历对象，在创建完成后还需要将个属性的属性值赋值给相应的td；

//2. 创建td

for (var k in datas[i]) {

var td = document.createElement('td');

// 将创建的td添加到相应的tr中

tr.appendChild(td);

// 3.将属性值赋值给相应的td

td.innerHTML = datas[i][k]

}

5.添加删除链接

//4.创建删除链接td

var td = document.createElement('td');

td.innerHTML = '<a href="javascript:;">删除</a>';

tr.appendChild(td);

}

6.增加删除操作

// 5.删除操作

var as = document.querySelectorAll('a');

for (var i = 0; i < as.length; i++) {

as[i].onclick = function () {

tbody.removeChild(this.parentNode.parentNode);

}

}

7.如果想要增加数据，就自己增加对象就行

{

name: '大猪蹄子',

subject: 'JavaScript',

score: 0

}, {

name: '大猪蹄子',

subject: 'JavaScript',

score: 0

}]

显示结果：

 

最后完整代码如下：
 

<style>
//css
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
//html
  <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
//javascript
  // 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
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];

        /* 先获取相应的对象*/
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            // 1. 创建tr 
            var tr = document.createElement('tr');
            //将tr添加到tbody里面
            tbody.appendChild(tr);
            //2. 创建td
            for (var k in datas[i]) {
                var td = document.createElement('td');
                // 将创建的td添加到相应的tr中
                tr.appendChild(td);

                // 3.将属性值赋值给相应的td
                td.innerHTML = datas[i][k]
            }
            //4.创建删除链接td
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }

        // 5.删除操作
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () { 
                tbody.removeChild(this.parentNode.parentNode);
            }
        }



    </script>