js动态修改表格数据

使用js在表格个内进行动态修改，需要再点击每一个td的时候在每个td里动态的添加一个input文本框
然后把input的样式设计一下与td的宽度和高度一致去掉input的内外边框和outline

点击修改可直接在表格重修改操作。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#tb{width: 600px;margin: 100px auto;text-align: center;}.header{background-color: aqua;color: white;}#tb td{width: 100px;}input{width: 99%;height: 10px;outline: none;/*border: none;*/}</style><script>window.onload = function(){var tb = document.getElementById('tb');var allA = tb.getElementsByTagName('a');//给每一个a绑定事件for(let i = 0;i<allA.length;i++){allA[i].onclick = function(){//获取该a的trvar tr = this.parentNode.parentNode;var tds = tr.getElementsByTagName('td');//获取到每一个td为他们绑定点击事件for(let i = 0;i<tds.length - 1;i++){tds[i].index = i; // 为下面下标准备tds[i].onclick = function(event){var evt = event||window.event;//这一行很重要防止多次点击出现错误，只有第一次点击td时才能触发，//当然这个需要配合上面的input的样式刚好和td的高度和宽度一样，这样才能防止误触if(evt.target.tagName.toLowerCase() == "td"){var input = document.createElement('input');input.value = this.innerHTML;tds[this.index].innerHTML = ''; //清除td中原有的文字tds[this.index].appendChild(input); input.focus(); //获取焦点}//失去焦点保存，如果数据是动态获取的则可以在这个里面操作数据input.onblur = function(){this.parentNode.innerHTML = this.value;tds[i].onclick = null;}}}}}}</script>
</head>
<body><table border="1" cellpadding="0" cellspacing="0" id="tb"><tr class="header"><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>操作</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td><a href="javascript:;">修改</a></td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td><a href="javascript:;" >修改</a></td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td><a href="javascript:;" >修改</a></td></tr></table>
</body>
</html>

实际中，真正的数据肯定是从后台动态获取的，表格也是动态生成的，对于json的操作在可以设置为在失去焦点后，也可以用其他更好的方法，对json数据进行操作。

js动态修改表格数据相关推荐

使用JS动态生成表格数据和分页显示
根据录入的内容动态显示到页面,不需要通过数据库保存,这样子减轻服务器压力.同时如果数据过多,支持分页显示,这些数据到保存时可以一起提交到后台. 效果如下: js代码(要引入JQuery): <! ...
LayUI表格在线编辑动态修改列数据
LayUI表格在线编辑动态修改列数据每次只能修改指定属性是 edit 定义的列 {field:'aname', width:80, title: '昵称', minWidth: 100, edit ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
js动态生成表格(原创)
原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改 ...
js动态创建表格以及赋值
1.使用js动态创建表格 (1)不可编辑的表格 function creatTableA() {var tbody = document.querySelector('#tableA');for (v ...
JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案
JS动态修改页面EasyUI datebox不生效.EasyUI动态添加Class.EasyUI动态渲染解析解决方案参考文章: (1)JS动态修改页面EasyUI datebox不生效.EasyUI ...
IOS小组件（4-2）：创建可配置小组件（动态修改配置数据）
IOS小组件(4-2):创建可配置小组件(动态修改配置数据) 引言在项目中添加"Intens Extension" 在 xxx.intentdefinition文件中增加一个动态 ...
js动态删除表格中的某一行
js动态删除表格中的某一行 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

js动态修改表格数据

js动态修改表格数据

js动态修改表格数据相关推荐

最新文章

热门文章