function deleRow(a){
//通过传参获取他的父级元素tr
var tr = a.parentNode.parentNode;
//通过remove来进行删除
tr.remove();
}
1
2
3
4
5
6
修改
首先通过cells获取到单元格的一个数组,将单元格每一个值赋值input中的value,可以在input元素中进行修改,修改之后再将每一个value赋值给td中,让它实现在table表格中
var id = cells[0].innerText;
var name = cells[1].innerText;
var sex = cells[2].innerText;
var phone = cells[3].innerText;
var address = cells[4].innerText;
var ary = [id,name,sex,phone,address];
for(var i = 0;i<ary.length;i++){
var input = document.createElement("input");
var a = ary[i];
if(a==null){
}else{
input.value = ary[i];
}
form.appendChild(input);
}
for(var i = 0;i<cells.length-1;i++){
cells[i].innerText = form.elements[i].value;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
添加
通过insertRow在表格的最后一行添加数据,insertCell在tr的最后一个单元格插入数据。
var table = document.getElementById("tab");
//通过rows返回所有行的一个数组,再用insertRow在最后一行插入数据
var tr = table.insertRow(table.rows.length);
var form = document.getElementById("form");
var length = form.length;
for(var i = 0;i<length;i++){
//通过insertCell在tr中的最后一个单元格插入数据
var td = tr.insertCell(i);
//最后将值赋值给单元格
td.innerText = form.elements[i].value;
//最后一个td直接为固定的
if(i == length-1){
td.innerHTML = '<input type="button" value="更 新" οnclick="updateTab(this)" />' +
'<input type="button" value="删除" οnclick="deleRow(this)" />'
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
代码
编号 | 姓名 | 性别 | 手机号 | 地址 | 操作 |
---|---|---|---|---|---|
0001 | 豁牙儿 | 男 | 18866669999 | 山西太谷 | |
0002 | 欣欣 | 女 | 16688888888 | 甘肃兰州 |