1、test.html 测试页
<
html
>
<
head
>
<
title
>
测试页面
</
title
>
<
style
>
.list {
border
-
top:
1
solid #8A2BE2;
border
-
left:
1
solid #8A2BE2;
border
-
right:
1
solid #8A2BE2;
}
.list td {
border
-
bottom:
1
solid #8A2BE2;
}
</
style
>
<
script
>
function $(el) {
return
document.getElementById(el);
}
function showWin(param) {
window.showModalDialog(
"
dailog.htm
"
, param,
"
dialogWidth:
"
+
param.width
+
"
px;dialogHeight:
"
+
param.height
+
"
px;center:yes;help:no;scroll:no;status:no;resizable:no
"
);
}
function TB(tbid) {
this
.tb
=
typeof(tbid)
==
"
string
"
?
$(tbid): tbid;
this
.getValue
=
function(rowIndex, cellIndex){
var trs
=
this
.tb.rows[rowIndex];
var _td
=
trs.cells[cellIndex];
return
_td.innerText;
}
this
.setValue
=
function(rowIndex, cellIndex, value) {
var _tr
=
this
.tb.rows[rowIndex];
var _td
=
_tr.cells[cellIndex];
_td.innerText
=
value;
}
/**
******获取行索引*******
*/
this
.findRowIndex
=
function(eventSrc) {
var _tr
=
eventSrc;
//
eventSrc事件源,必须在TD里获事件源是TD或TR本身
while
(_tr.tagName
!=
"
TR
"
) {
_tr
=
_tr.parentNode;
}
var trs
=
this
.tb.rows;
for
(var i
=
0
; i
<
trs.length; i
++
){
if
(_tr
==
trs[i])
return
i;
}
}
}
function edit() {
var tb
=
new
TB(
"
data
"
);
rIndex
=
tb.findRowIndex(event.srcElement);
$(
"
updateRowIndex
"
).value
=
rIndex;
$(
"
userName
"
).value
=
tb.getValue(rIndex,
1
);
//
获得姓名
$(
"
sex
"
).value
=
tb.getValue(rIndex,
2
);
//
获得性别
$(
"
age
"
).value
=
tb.getValue(rIndex,
3
);
//
获得年龄
showWin({title:
"
修改用户信息
"
, width:
390
, height:
230
, _div:
"
openWin
"
,parent:window});
}
function saveAndUpdateView(){
var updateRowIndex
=
$(
"
updateRowIndex
"
).value;
var tb
=
new
TB($f(
"
data
"
));
//
$f()在dailog.html定义,获到的table是父窗口中的table
tb.setValue(updateRowIndex,
1
, $(
"
userName
"
).value);
tb.setValue(updateRowIndex,
2
, $(
"
sex
"
).value);
tb.setValue(updateRowIndex,
3
, $(
"
age
"
).value);
close();
}
</
script
>
</
head
>
<
body
>
<
p style
=
"
margin-top:60px
"
>
<
center
>
<
table id
=
"
data
"
class
=
"
list
"
width
=
"
460px
"
>
<
tr
>
<
td
>
编号
</
td
>
<
td
>
用户名
</
td
>
<
td
>
性别
</
td
>
<
td
>
年龄
</
td
>
<
td
>
操作
</
td
>
</
tr
>
<
tr
>
<
td
>
1
</
td
>
<
td
>
李永胜
</
td
>
<
td
>
男
</
td
>
<
td
>
27
</
td
>
<
td
><
span style
=
"
background:#FAEBD7;cursor:hand
"
onclick
=
"
edit();
"
>&
nbsp;修改
&
nbsp;
</
span
></
td
>
</
tr
>
<
tr
>
<
td
>
2
</
td
>
<
td
>
林兄
</
td
>
<
td
>
男
</
td
>
<
td
>
27
</
td
>
<
td
><
span style
=
"
background:#FAEBD7;cursor:hand
"
onclick
=
"
edit();
"
>&
nbsp;修改
&
nbsp;
</
span
></
td
>
</
tr
>
<
tr
>
<
td
>
3
</
td
>
<
td
>
叶兄
</
td
>
<
td
>
男
</
td
>
<
td
>
23
</
td
>
<
td
><
span style
=
"
background:#FAEBD7;cursor:hand
"
onclick
=
"
edit();
"
>&
nbsp;修改
&
nbsp;
</
span
></
td
>
</
tr
>
</
table
>
</
center
>
</
p
>
<!---
弹出窗口显示的内容
---->
<
div id
=
"
openWin
"
style
=
"
display:none;
"
>
<
form
>
<
fieldSet
>
<
legend
>
修改用户
</
legend
>
<
table
>
<
tr
>
<
td
>
用户名
</
td
><
td
><
input type
=
"
text
"
id
=
"
userName
"
/></
td
>
</
tr
>
<
tr
>
<
td
>
性别
</
td
><
td
><
input type
=
"
text
"
id
=
"
sex
"
/></
td
>
</
tr
>
<
tr
>
<
td
>
年龄
</
td
><
td
><
input type
=
"
text
"
id
=
"
age
"
/></
td
>
</
tr
>
</
table
>
</
fieldSet
>
<
input type
=
"
hidden
"
id
=
"
updateRowIndex
"
/>
</
form
>
<
span style
=
"
background:#FAEBD7;cursor:hand
"
onclick
=
"
saveAndUpdateView();
"
>&
nbsp;修改
&
nbsp;
</
span
>
</
div
>
</
body
>
</
html
>
2、dailog.html 窗口原型
<
html
>
<
head
>
<
script
>
var param
=
window.dialogArguments;
//
传过来的模式对话框窗口参数
document.title
=
param.title;
//
窗口标题,必须在窗口创建前实现s
/**
******将父窗口的js加载进来*******
*/
var scripts
=
param.parent.document.scripts;
var _head
=
document.getElementsByTagName(
"
head
"
)[
0
];
for
(var n
=
0
; n
<
scripts.length; n
++
) {
if
(scripts[n].src) {
var _script
=
newEl(
"
script
"
);
_script.src
=
scripts[n].src;
bind(_head, _script);
}
else
{
//
加载直接在html文档中写的script
var _script
=
newEl(
"
script
"
);
_script.text
=
scripts[n].text;
bind(_head, _script);
}
}
/**
*****根据ID获得父窗口的元素********
*/
function $f(el) {
return
param.parent.document.getElementById(el);
}
/**
*********创建一个HTML元素******
*/
function newEl(tagName) {
return
document.createElement(tagName);
}
/**
*********追加元素**************
*/
function bind(ower, child) {
ower.appendChild(child);
}
/**
*****在浏览器完成对象的装载后立即触发********
*/
window.onload
=
function() {
var winDiv;
if
(typeof(param._div)
==
"
string
"
) {
winDiv
=
param.parent.document.getElementById(param._div);
//
父窗口window对象,因为param._div对象在父窗口
}
else
{
//
直接传对象过来
winDiv
=
param._div;
}
$(
"
mainDiv
"
).innerHTML
=
winDiv.innerHTML;
//
将DIV内容在弹出窗口中渲染
}
</
script
>
</
head
>
<
body
>
<
center
>
<
div id
=
"
mainDiv
"
style
=
"
margin-top:20px;width:90%
"
></
div
>
</
center
>
</
body
>
</
html
>