创建可增添内容和删除当前行的表格

1.首先创建表格，设置表格id

姓名

性别

年龄

操作

2.设置新增一行的按钮

3.写add（）方法。在表格标签中新增tr节点。首先创建td标签。

var add = function(){
var td_1 = document.creatElement("td_1");
td_1.innerHTML = "未输入";
var td_2 = document.creatElement("td_2");
td_2.innerHTML = "未输入";
var td_3 = document.creatElement("td_3");
td_3.innerHTML = "未输入";
var td_4 = document.creatElement("td_4");
td_4.innerHTML = "未输入";
var tr = document.creatElement("tr");

将td标签加入到tr中。

tr.appendChild(td_1);
tr.appendChild(td_2);
tr.appendChild(td_3);
tr.appendChild(td_4);

var table = document.getElementById("t_1");

将tr加入到table标签中。

table.appenChild(tr);
}

3.设置删除当前行，在td的最后一格添加按钮,引入del方法（）。

var td_4 = document.creatElement("td_4");
td_4.innerHTML = ""; //注意需要转义双引号。

获取当前button的父节点到tr节点级，在table中删除tr。

var del = function(button){
var tr = button.parentNode.parentNode;
var table = document.getElementById("t_1");
table.removeChild(tr);
}

4.使td中的内容双击可编辑。对td设置参数值,当输入框失焦时将输入内容插入到表格td中。
td_1.setAttribute = ("ondblclick","edit(this)");

var edit = function(td){
td.innerHTML = "<input type="text" value="" onblur="insert(this);">";
}

5.将输入的内容替换之前的td。

var insert = function(text){

var td = text.parentNode;
td.innerHTML = text.value;
}