写在前面
该内容很久以前就写了，放在下载频道，csdn自动将分数调至很高，所以今天把里面的内容全部以博客形式写出来
下载地址
动态表格js实现
文件名:edit-tb.js
(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
]];
}
}
}
var littlehow_edit_table = function(tbody
, ev
){
this.tbody
= $(tbody
);
this.editColumn
= [];
this.event
= ev
? ev
: "click";
this.init = function(data
) {
if(data
&& data
.rows
> 0) {
fulltable(this.tbody
, data
);
}
var len
= this.tbody
.rows
[0].cells
.length
;
if(data
&& data
.edit
){
var json
= {};
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 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", "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", "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>
Processed:
0.031, SQL:
10
