js操作DOM是否是你想要的结构?我的问题与你类似,只不过是建立在动态表上
/**
功能实现:1、实现表格添加一行
2、实现表格删除当前行
步骤:1、根据表格id获取当前表格
2、获取表格中的tBody(Bodies[0])
3、为添加按钮增加click事件,为tBody创建子节点添加
4、为当前行的a元素增加click事件,删除本行
注意点:1、添加一行时,生成序号的获取
2、删除时,获取a元素,添加事件
*/
window.onload = function(){
//获取ID为tab1的表格
var oTab = document.getElementById('tab1');
//获取id为name的文本框
var oName = document.getElementById('name');
//获取id为age的文本框
var oAge = document.getElementById('age');
//获取id为btn1的按钮
var oBtn = document.getElementById('btn1');
var index= oTab.tBodies[0].rows.length;
//为oBtn添加click事件,每点击一次,增加一行
oBtn.onclick = function (){
//创建元素tr
var oTr =document.createElement('tr');
index++;
//创建第一个td
var oTd1 = document.createElement('td');
//***序号id获取要注意
oTd1.innerHTML = index;
oTr.appendChild(oTd1);
//创建
var oTd2 = document.createElement('td');
oTd2.innerHTML = oName.value;
oTr.appendChild(oTd2);
var oTd3 = document.createElement('td');
oTd3.innerHTML = oAge.value;
oTr.appendChild(oTd3);
var oTd4 = document.createElement('td');
oTd4.innerHTML = '删除';
oTr.appendChild(oTd4);
//**获取到当前添加行里的a元素,增加click事件
oTd4.getElementsByTagName('a')[0].οnclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
//将tr添加到tbody中
oTab.tBodies[0].appendChild(oTr);
}
}
姓名:
年龄:
ID姓名年龄操作
1张三222李四273王五34赵六505王小七306刘小二36