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();"> 修改 </span></td>
</tr>
<tr>
<td>2</td>
<td>林兄</td>
<td>男</td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
<tr>
<td>3</td>
<td>葉兄</td>
<td>男</td>
<td>23</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </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();"> 修改 </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>
如需轉載，請注明原文出處！謝謝合作。
posted on 2008-05-01 21:33
Sonny Li 閱讀(5461)
評論(15) 編輯 收藏 所屬分類:
javascript編程語言