简单功能介绍:当点击删除时,所在删除的这一行将被删除
效果展示
步骤分析
1.表格中的数据并不是写死的,是我们通过创建一个datas对象动态获取到的,我们把数据写在里面,我们在H5代码里面的tbody里面是不需要写相关的数据的
2. 我们要在tbody里面创建行,这个行数是通过datas[i]数组的长度决定的
(1)先创建行数
(2)创建行数里面的单元格,这里面单元格的数量主要是取决于每个对象里面的属性值,有三个属性就创建3个单元格
(3)当我们创建完单元格后,就要考虑把datas[i]里面的数据值放在单元格里面。
for (k in obj)
k得到的是属性名
obj[k]得到的是属性值
- 创建删除两个字的单元格,给删除按钮进行点击方法
代码
下面展示一些 代码
。
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>所选科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
// An highlighted block
<script>
//1.准备学生的数据,要js动态生成
var datas = [
{
name: "小宝贝",
subject: "javascript",
score: 100
},
{ name: "猪猪侠",
subject: "javascript",
score: 800
},
{ name: "大脸猫",
subject: "javascript",
score: 50
}
]
//2.创建行,跟数据有关系的三个单元格
var tbody = document.querySelector("tbody");
//循环,i要小于datas里面的数据长度,这个for循环主要管的是行
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement("tr"); //创建tr节点
tbody.appendChild(tr); //在tbody里面添加tr节点 //这个for循环是专门管tr里面的td行的,遍历数组datas[i],
//在里面创建td,有多少个属性,就创建多少个td
for (var k in datas[i]) {
var td = document.createElement("td");
//在tr里面创建td
tr.appendChild(td);
//要让td获取到datas[i]里面的值,for...in 语句中 //for(k in obj)中k得到的是属性名,obj[k]得到的是属性值
//改变元素内容 element.innerHTML
td.innerHTML = datas[i][k];
}
//3.创建有删除二字的单元格
var td = document.createElement("td"); //给添加的td赋值
td.innerHTML = '<a href="javascript:;">删除 </a>'; //把添加的td给一下位置,放在tr里面
tr.appendChild(td);
//4.删除功能的实现
var as=document.querySelectorAll("a");
as[i].onclick = function() {
//当我们点击as[i]里面的a元素时,删除的是as[i]父级元素td的父级元素td
tbody.removeChild(this.parentNode.parentNode);
}
} </script>