模拟在表格中动态添加和删除数据;
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>