javascript将table的td变为可编辑的input，实现表格动态编辑（带示例版）

写在前面

该内容很久以前就写了，放在下载频道，csdn自动将分数调至很高，所以今天把里面的内容全部以博客形式写出来

CSDN下载地址

动态表格js实现

文件名:edit-tb.js

/****  功能：将只读表格变成可编辑表格*  支持自定义事件进行编辑*  表格样式可以自己设置*  只负责tbody部分*  data结构样式如下:     {rows:3, data:[{name:"littlehow", age:18},{...}], column:["name", "age"]}*  @author littlehow*  @time 2016/7/29 星期五**/
(function() {var $ = function(node) {return typeof node == "string" ? document.getElementById(node) : node;}var $1 = function(node, parent){var nd = document.createElement(node);if(parent) parent.appendChild(nd);return nd;}/** 绑定事件流 */var bind = function(obj, eventName, funcionName){if(obj.addEventListener){obj.addEventListener(eventName, funcionName,false);}else if(obj.attachEvent) {obj.attachEvent("on" + eventName, funcionName);}else{obj["on" + eventName] = funcionName;}};var fulltable = function(tbody, data){var pd = data.data;var column = data.column;for(var i=0, len=data.rows; i<len; i++){var tr = $1("tr", tbody);var cd = pd[i];for(var j=0,jlen=column.length; j<jlen; j++){var td = $1("td", tr);td.innerHTML = cd[column[j]];//innerText不兼容火狐，可以自己写innerText和textContent的兼容，这里就直接用innerHTML了}}}var littlehow_edit_table = function(tbody, ev){this.tbody = $(tbody);this.editColumn = [];this.event = ev ? ev : "click";//默认为单机事件this.init = function(data) {//data可以是undefinedif(data && data.rows > 0) {//判断是否有数据fulltable(this.tbody, data);}var len = this.tbody.rows[0].cells.length;//调用可编辑if(data && data.edit){var json = {};//去重用，这里就不实现set去重了for(var i=0; i<data.edit.length; i++){var v = data.edit[i];if(v>=0 && v<len){var jv = json["json" + v];if(jv) continue;else json["json" + v] = "json"+v;this.editColumn.push(v);}}}else{for(var i=0; i<len; i++){this.editColumn.push(i);}}this.editLen = this.editColumn.length;this.edit();}this.edit = function(){var rows = this.tbody.rows;for(var i=0,len=rows.length; i<len; i++){var row = rows[i];for(var j=0, jlen=this.editLen; j<jlen; j++){bind( row.cells[this.editColumn[j]], this.event, this.click);}}}this.click = function(){if(this.children.length > 0) return;var v = this.innerHTML;this.innerHTML = "";var input = $1("input", this);input.type = "text";input.value = v;input.focus();//光标聚集bind(input, "blur", blur);}var blur = function(){var v = this.value;this.parentNode.innerHTML = v;}}window.$$ = function(id, ev){return new littlehow_edit_table(id, ev);};
})()

示例css文件

table.css

.mytable{border-collapse:collapse;width:750px;margin-top:100px;
}
.mytable thead{background-color:#97CBFF;height:38px;font-weight:bold;
}
.mytable tbody{background-color:#FAF4FF;color:green;
}
.mytable td{border:1px solid blue;width:20%;height:30px;text-align:center;
}.mytable td input[type=text]{width:93%;height:24px;background-color:#D3A4FF;border:1px solid #FAF4FF;border-radius:4px;color:blue;
}.mytable td input[type=button]{width:50%;height:24px;background-color:#84CEFF;border:1px solid #FAF4FF;border-radius:4px;color:gray;font-weight:bold;
}

调用示例

js文件放于js目录下，css文件放于css目录下，html文件放于html目录下

示例一(源数据直接编辑)

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>编辑有值的表格</title><script type="text/javascript" src="../js/edit-tb.js"></script><link href="../css/table.css" rel="stylesheet" type="text/css"/><script type="text/javascript">window.onload = function(event) {var t = $$("databody");//默认为单击触发//var t = $$("databody", "dblclick");//自定义触发事件(双击)//定义可编辑的行，会自动将非法行进行过滤并去重,edit表示td下标var json = {edit : [-1,1, 4,3,9,3,4]};t.init(json);}</script></head><body><table align="center" class="mytable" cellpadding="0" cellspacing="0"><thead><tr><td>姓名</td><td>年龄</td><td>生日</td><td>身高(cm)</td><td>体重(kg)</td></tr></thead><tbody id="databody"><tr><td>littlhow</td><td>18</td><td>1998-09-18</td><td>160</td><td>52</td></tr><tr><td>color wolf</td><td>19</td><td>1997-08-18</td><td>165</td><td>61.5</td></tr><tr><td>yellow dog</td><td>20</td><td>1996-03-15</td><td>170</td><td>68</td></tr></tbody></table></body>
</html>

示例二(后生成数据进行编辑)

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>编辑动态传值的表格</title><script type="text/javascript" src="../js/edit-tb.js"></script><link href="../css/table.css" rel="stylesheet" type="text/css"/><script type="text/javascript">window.onload = function(event) {//var t = $$("databody");//默认为单击触发var t = $$("databody", "dblclick");//自定义触发事件(双击)var json = {rows : 5,data : [{name:"littlehow", age:18, birth:"1998-01-01", height:160, weight:52},{name:"color worf", age:33, birth:"1983-01-01", height:170, weight:62},{name:"黑狗", age:20, birth:"1996-06-11", height:165, weight:57},{name:"蓝猫", age:22, birth:"1994-03-15", height:168, weight:59},{name:"紫猪", age:26, birth:"1990-08-21", height:180, weight:68}],column : ["name", "age", "birth", "height", "weight"],edit :[0,4]}t.init(json);}</script></head><body><table align="center" class="mytable" cellpadding="0" cellspacing="0"><thead><tr><td>姓名</td><td>年龄</td><td>生日</td><td>身高(cm)</td><td>体重(kg)</td></tr></thead><tbody id="databody"></tbody></table></body>
</html>

示例三(拥有操作形式的编辑)

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>编辑动态传值并拥有操作按钮的表格</title><script type="text/javascript" src="../js/edit-tb.js"></script><link href="../css/table.css" rel="stylesheet" type="text/css"/><script type="text/javascript">window.onload = function(event) {//var t = $$("databody");//默认为单击触发var t = $$("databody", "mouseover");//自定义触发事件(双击)var json = {rows : 5,data : [{name:"littlehow", age:18, birth:"1998-01-01", height:160, oper:"<input type='button' value='查看' οnclick='showMe(this.parentNode.parentNode);'>"},{name:"color worf", age:33, birth:"1983-01-01", height:170, oper:"<input type='button' value='查看' οnclick='showMe(this.parentNode.parentNode);'>"},{name:"黑狗", age:20, birth:"1996-06-11", height:165, oper:"<input type='button' value='查看' οnclick='showMe(this.parentNode.parentNode);'>"},{name:"蓝猫", age:22, birth:"1994-03-15", height:168, oper:"<input type='button' value='查看' οnclick='showMe(this.parentNode.parentNode);'>"},{name:"紫猪", age:26, birth:"1990-08-21", height:180, oper:"<input type='button' value='查看' οnclick='showMe(this.parentNode.parentNode);'>"}],column : ["name", "age", "birth", "height", "oper"],edit : [1, 2, 3]}t.init(json);}function showMe(tr){var s = "";var cells = tr.cells;s = s + "姓名:" + cells[0].innerHTML + "\n" + "年龄:" + cells[1].innerHTML + "\n";s = s + "生日:" + cells[2].innerHTML + "\n" + "身高:" + cells[3].innerHTML + "cm";alert(s);}</script></head><body><table align="center" class="mytable" cellpadding="0" cellspacing="0"><thead><tr><td>姓名</td><td>年龄</td><td>生日</td><td>身高(cm)</td><td>操作</td></tr></thead><tbody id="databody"></tbody></table></body>
</html>

javascript将table的td变为可编辑的input，实现表格动态编辑（带示例版）相关推荐

Javascript操作table,tr,td和表格CSS样式设置小常识
效果良好的表属性设置: <table cellSpacing="0" cellPadding="0" border='1' bordercolor=&qu ...
php ajax 表格编辑,php ajax表格实时编辑 PHP Ajax实现表格实时编辑
想了解PHP Ajax实现表格实时编辑的相关内容吗,佛祖的腿毛在本文为您仔细讲解php ajax表格实时编辑的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:php,ajax表格实时编辑,a ...
html tr加样式,Javascript操作table,tr,td和表格CSS样式设置小常识
效果图:方法一姓名性别住址电话张三男 ...
elementui可编辑单元格_ElementUI 表格可编辑单元格
页面 export default{ components: { EditableCell: () => import('@/components/EditableCell/EditableCe ...
java中table是什么标签_[Java教程]javascript格式化table标签内容
[Java教程]javascript格式化table标签内容 0 2015-07-12 20:00:08 项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table ...
JavaScript遍历table
JavaScript遍历table 1.说明遍历表格中的某行某列,并打印其值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
html给自动生成的td赋值,JS 动态创建Table,Tr,Td并赋值的简单示例
修改: 要求主题列表随成果类型改变而改变网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table JS部分: 经测试代码如下: /** * 动 ...
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
http://www.jb51.net/article/44476.htm 本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,dele ...
php怎么给table添加背景,怎样对table和td设置背景实现表格边框
很多朋友都很苦恼表格样式怎么设置,今天就给大家详细讲解一下css表格样式怎么设置,之前说过三种方法,只对table设置边框,对td设置边框,对table和td技巧性设置表格边框现在给大家带来怎样对ta ...

javascript将table的td变为可编辑的input，实现表格动态编辑（带示例版）

写在前面

动态表格js实现

示例css文件

调用示例

示例一(源数据直接编辑)

示例二(后生成数据进行编辑)

示例三(拥有操作形式的编辑)

javascript将table的td变为可编辑的input，实现表格动态编辑（带示例版）相关推荐

最新文章

热门文章