html弹窗显示表格 js弹框表格 获取数据添加进去dom里面

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

如果觉得《html弹窗显示表格 js弹框表格 获取数据添加进去dom里面》对你有帮助，请点赞、收藏，并留下你的观点哦！