动态Web表格

最新推荐文章于 2024-07-20 18:56:42 发布

weixin_30632899

最新推荐文章于 2024-07-20 18:56:42 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaodian/archive/2008/10/06/1305028.html

版权

这是我花1个小时写的东西，第一次发贴就不言语了，直接上代码:

Code
1

// 表格操作
2

// 作者:小点
3

// 时间:2008-10-07
4

function Table()
6

{
7

var _objTbl = null,_oTBody = null;
8

var _n = null;
9

var _r = null;
10

var _c = null;
11

// 创建表格元素
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

_objTbl = document.createElement("TABLE");
20

_oTBody = document.createElement("TBODY");
21

_objTbl.id = _n;
23

_objTbl.style.border="1px solid blue"; // 表格(table)样式
24

for(i=0;i<_r;i++)
26

{
27

this.CreateRow(i);
28

}
29

_objTbl.appendChild(_oTBody);
30

return _objTbl;
32

}
33

// 创建表格的行
35

this.CreateRow = function(rownum)
36

{
37

var n = _n + "_tr_" + rownum.toString();
38

var objRow = document.createElement("TR");
39

objRow.id = n;
40

_oTBody.appendChild(objRow);
42

for(j=0;j<_c;j++)
44

{
45

this.CreateCell(objRow,i,j);
46

}
47

}
48

// 创建表格的列
50

this.CreateCell = function(objRow,rownum,cellnum)
51

{
52

var n = _n + "_tr_"+ rownum + "_td_" + cellnum.toString();
53

var objCell = document.createElement("TD");
54

objCell.id = n;
56

objCell.title = n;
57

objCell.innerText = _n + "=" + rownum + " , " + cellnum; // 设置单元格里的值
58

objCell.style.border="1px solid gray";// 单元格(td)样式
59

// 表格操作事件
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

objRow.appendChild(objCell);
65

}
66

// 删除单元格所在的行
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

// 删除单元格所在的列
78

this.DeleteCell = function(tblname,rownum,cellnum)
79

{
80

if((null == rownum) || (null == cellnum) || (null == tblname)) return;
81

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

// 填充表格数据
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

以上为该功能核心代码，您可以这样调用:

Code
1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2

<html>
3

<head>
4

<title> Create Table </title>
5

</head>
11

<!--
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

var table = new Table();
25

var tblname = GetRandomNum(1,5) ;
27

var objTbl = table.Create(tblname,8,3);
29

table.SetDate(value);
31

$("Container").appendChild(objTbl);
33

}
34

// 随机表格名
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

function Print()
45

{
46

alert(document.body.innerHTML);
47

}
48

//-->
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

这样你可以动态创建一个表格，并支持删除单行或列。

这是最近项目中需要的东西，帮一同事写的js脚本,如果您还要对创建的表格进行其它，您可以适当扩充一下。

转载于:https://www.cnblogs.com/xiaodian/archive/2008/10/06/1305028.html

weixin_30632899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫