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可以是undefined
if(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目录下
示例一(源数据直接编辑)
<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>littlhowtd>
<td>18td>
<td>1998-09-18td>
<td>160td>
<td>52td>
tr>
<tr>
<td>color wolftd>
<td>19td>
<td>1997-08-18td>
<td>165td>
<td>61.5td>
tr>
<tr>
<td>yellow dogtd>
<td>20td>
<td>1996-03-15td>
<td>170td>
<td>68td>
tr>
tbody>
table>
body>
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>
示例三(拥有操作形式的编辑)
<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:""},
{name:"color worf", age:33, birth:"1983-01-01", height:170, oper:""},
{name:"黑狗", age:20, birth:"1996-06-11", height:165, oper:""},
{name:"蓝猫", age:22, birth:"1994-03-15", height:168, oper:""},
{name:"紫猪", age:26, birth:"1990-08-21", height:180, oper:""}
],
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>