javascript操作Table

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hzq3554055/archive/2008/08/06/1262290.html

文章标签：

#javascript #ViewUI

概述：父页面A调用子页面B，从子页面B返回数据从而在父页面A上构建一行追加到原有的表格上；

----------------------------------------------------------------------------------------

A页面的调用脚本：

Code
1

var RecordObj = null;
2

var OverRecordObj = null;
3

function GetSth()
4

{
5

var url = "../CorpResTree.aspx?URL=Scrap/AccountList.aspx";
6

var reStr=window.showModalDialog(url,window,"dialogHeight:300px;dialogWidth:580px;center:1;help:0;status:0;");
7

if(reStr != null)
8

{
9

var values=reStr.split(',');
10

var tbmain=document.getElementById('GVInOutMain');
11

var newRow=tbmain.insertRow();
12

newRow.id=values[0];
13

newRow.className="grid_row";
14

for(var i=1;i<7;i++)
15

{
16

var newCell=newRow.insertCell();
17

newCell.innerHTML=values[i];
18

newCell.align="center";
19

}
20

newRow.onmouseover=function()
21

{
22

var obj=newRow;
23

if(obj != RecordObj)
24

{
25

obj.className = 'trm_over';
26

}
27

if( OverRecordObj != null && OverRecordObj != RecordObj)
29

{
30

OverRecordObj.className = 'trm_out';
31

}
32

OverRecordObj = obj;
34

}
35

newRow.onclick=function()
36

{
37

var obj=newRow;
38

obj.className = 'trm_focus';
39

if( RecordObj != null && RecordObj != obj)
40

{
41

RecordObj.className = 'trm_out';
42

}
43

RecordObj = obj;
44

document.getElementById('btnDel').disabled = false;
45

//document.getElementById('hdnItemIndex').value = row.id;
46

}
47

}
48

}

A页面相关元素：

Code
1

<input id="btnAdd" type="button" onclick="GetSth();" value="增加"/>
2

<table id="GVInOutMain" border="0" cellpadding="0" cellspacing="0" class="grid" rules="all">
4

<tr align="center" class="grid_head">
5

<th align="center" nowrap="nowrap" scope="col" style="width: 70px">
6

名称</th>
7

<th align="center" nowrap="nowrap" scope="col" style="width: 70px">
8

编码</th>
9

<th align="center" nowrap="nowrap" scope="col" style="width: 70px">
10

规格</th>
11

<th align="center" nowrap="nowrap" scope="col" width="70" style="width: 70px">
12

购买日期</th>
13

<th align="center" nowrap="nowrap" scope="col" style="width: 70px">
14

责任人</th>
15

<th align="center" nowrap="nowrap" scope="col" style="width: 70px">
16

净值</th>
17

</tr>
18

</table>

-------------------------------------------------------------

B页面的js脚本：

Code

B页面的HTML元素：

.....

一个和A页面上一摸一样的表格，只不过是GridView动态生成的；一个按钮关联SelectSave()函数。

------------------------------------------------------------------------------------------------

总结：

熟悉了下js实现类的方法，可惜的是不能在页面间传递js对象，指的是子页面关闭回到父页面这种情况，如果是是通过iframe嵌套的话另当别论，因为js对象是引用类型而页面关闭的时候js就会消失（不够严谨）；
体会到了W3C标准的重要性，IE、FireFox等没有统一的页面对象操作方法，导致我一天搜索了不下40个页面，浪费了相当长的时间和体力才搞定；
并且在IE下不能调试脚本，只好alert()这里，alert()那里；FireFox下的调试用的插件都摆在一边没法子用；
appendChild(); document.createElement(""); Row1.setAttribute("align","center"); 这几个函数在IE下都不能用；最终用 insertRow();insertCell;Row1.align="center";才搞定。
给元素添加事件相应函数的问题用 "莫名函数"....