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里面相关推荐

bootstrap-editable表格编辑弹框无效
根据大牛的博客,使用editable插件实现bootstrapTable单元格现场修改数据的功能,然后报了个很奇怪的错误.先步骤回顾,解决方法在最后: 一.引入的关键文件: jquery.js boo ...
element-ui主表格多选后二级弹框表格默认全选数据
需求:element ui的主数据列表多选后,点击按钮进入二级弹框后,让二级弹框的所有数据默认全选二级弹框结构: 网上试了好多方法都未生效,只有用watch监听的方法才行. 注意:这里必须放在thi ...
【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
解决elementui多层dialog弹窗遮罩问题弹窗套娃出现了整个屏幕都是遮罩层的问题,需要鼠标点击一下才能正常. 在弹窗组件代码上加上 append-to-body 就可以了,表示这个弹窗是嵌在 ...
element js 包含字符_selenium3.x（10）js弹框处理
web应用中,经常会遇到弹框.不处理弹框,页面其他元素都是不能操作的.js弹框有3种:alert警告框.confirm确认窗口.prompt信息输入窗口. webdriver提供了处理这3种弹框的方法 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
js弹框带传值父窗口给子框_layer弹窗，父页面子iframe 兄弟iframe之间传值，函数调用...
在这里记录下前端layer弹窗父,子,兄弟弹窗之间参数传递以及函数调用 ① [父-->子] [子-->父] 前言 //子弹窗给父页面元素赋值 parent.$("#paren ...
笔记--禁用js弹框
禁用原系统方法内系统弹框,插入自定义逻辑后恢复 var alertFunc; function notAlert(){alertFunc=window.alert; window.alert=func ...
selenium--操作JS弹框
前戏我们常见的弹框有三种,一种是alert弹框,一种是prompt弹框,还有一种是confirm弹框那他们有什么不同呢?不同点就是他们长的不一样,alert弹框有一段文字和一个确定按钮,如下在来看 ...
ajax获取数据添加到表格,Jquery通过AJAX从后台获取数据显示在表格上（复选）
代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...

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

html弹窗显示表格,js弹框表格，获取数据添加进去dom里面相关推荐

最新文章

热门文章