动态操作Web表格
这是我花1个小时写的东西，第一次发贴就不言语了，直接上代码:
Code1
// 表格操作2
// 作者:小点3
// 时间:2008-10-074
5
function Table()6
{7
var _objTbl = null,_oTBody = null;8
var _n = null;9
var _r = null;10
var _c = null;11
12
// 创建表格元素13
this.Create = function(n,r,c)14
{15
_r = (null == r) ? 1 : r;16
_c = (null == c) ? 1 : c;17
_n = (null == n) ? "nTbl" : n;18
19
_objTbl = document.createElement("TABLE");20
_oTBody = document.createElement("TBODY"); 21
22
_objTbl.id = _n;23
_objTbl.style.border="1px solid blue"; // 表格(table)样式24
25
for(i=0;i<_r;i++)26
{ 27
this.CreateRow(i);28
}29
_objTbl.appendChild(_oTBody);30
31
return _objTbl;32
}33
34
// 创建表格的行35
this.CreateRow = function(rownum)36
{37
var n = _n + "_tr_" + rownum.toString();38
var objRow = document.createElement("TR");39
objRow.id = n;40
41
_oTBody.appendChild(objRow);42
43
for(j=0;j<_c;j++)44
{45
this.CreateCell(objRow,i,j);46
}47
}48
49
// 创建表格的列50
this.CreateCell = function(objRow,rownum,cellnum)51
{52
var n = _n + "_tr_"+ rownum + "_td_" + cellnum.toString();53
var objCell = document.createElement("TD");54
55
objCell.id = n;56
objCell.title = n;57
objCell.innerText = _n + "=" + rownum + " , " + cellnum; // 设置单元格里的值58
objCell.style.border="1px solid gray";// 单元格(td)样式59
60
// 表格操作事件61
//objCell.onclick = function(){var obj = new Table(); obj.DeleteRow(_n,rownum);};62
objCell.onclick = function(){var obj = new Table(); obj.DeleteCell(_n,rownum,cellnum);};63
64
objRow.appendChild(objCell);65
}66
67
// 删除单元格所在的行68
this.DeleteRow = function(tblname,rownum)69
{70
if((null == rownum) || (null == tblname)) return;71
var cellname = tblname + "_tr_" + rownum.toString()72
var obj = $(cellname); 73
var objBody = obj.parentNode;74
objBody.removeChild(obj);75
}76
77
// 删除单元格所在的列78
this.DeleteCell = function(tblname,rownum,cellnum)79
{80
if((null == rownum) || (null == cellnum) || (null == tblname)) return;81
82
var cellname = tblname + "_tr_"+ rownum + "_td_" + cellnum.toString();83
var objcell = $(cellname); 84
var objBody = objcell.parentNode.parentNode;85
var objTable = objBody.parentNode;86
var x = objTable.rows.length;87
for(i=objTable.rows.length; i > 0; i--)88
{89
var r = i-1;90
var row = $(tblname + "_tr_"+ r.toString());91
var cell = $(tblname + "_tr_"+ r + "_td_" + cellnum.toString());92
row.removeChild(cell);93
} 94
}95
96
// 填充表格数据97
this.SetDate = function(v)98
{99
if(null == v) return;100
for(i = 0; i < v.length; i++)101
{102
//_objTbl.rows[i].cells[3].innerText.innerText = v[i].CompName;103
_objTbl.rows[i].cells[1].innerText = v[i].CompName;104
_objTbl.rows[i].cells[2].innerText = v[i].CompAddr;105
}106
}107
}108
109
function $(id)110
{111
return document.getElementById(id);112
}113
114
以上为该功能核心代码，您可以这样调用:
Code1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2
<html>3
<head>4
<title> Create Table </title>5
<meta name="Generator" content="EditPlus">6
<meta name="Author" content="">7
<meta name="Keywords" content="">8
<meta name="Description" content="">9
<script language="javascript" type="text/javascript" src ="Table.js"></script>10
</head>11
<script language="JavaScript">12
<!-- 13
// 创建表格14
function Create()15
{16
var value = [17
{'CompName':'昆山总公司','CompAddr':'昆山市'},18
{'CompName':'苏州分公司','CompAddr':'aaaaa'},19
{'CompName':'常熟分公司','CompAddr':'bbbbb'},20
{'CompName':'南京分公司','CompAddr':'ccccc'},21
{'CompName':'无锡分公司','CompAddr':'ddddd'}22
];23
24
var table = new Table();25
26
var tblname = GetRandomNum(1,5) ;27
28
var objTbl = table.Create(tblname,8,3);29
30
table.SetDate(value);31
32
$("Container").appendChild(objTbl);33
}34
35
// 随机表格名36
function GetRandomNum(Min,Max)37
{38
var Range = Max - Min;39
var Rand = Math.random();40
var retval = (Min + Math.round(Rand * Range));41
return "tbl" + retval;42
} 43
44
function Print()45
{46
alert(document.body.innerHTML);47
}48
49
//-->50
</script>51
<body>52
<div id="Container" style="border:1px solid red"></div>53
<input type="button" value="创建表格" onclick="Create()" />54
<input type="button" value="打印表格" onclick="Print()" />55
</body>56
</html>57
58
这样你可以动态创建一个表格，并支持删除单行或列。
这是最近项目中需要的东西，帮一同事写的js脚本,如果您还要对创建的表格进行其它，您可以适当扩充一下。
