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;
}