Parent Window Code: (named Random)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type content=" HTML; Charset=utf-8 "/>
<title> Untitled Document </title>
<script language= "JavaScript" >
var child;
function OnClick () {
window.open (' childwindow.html ');
}
function SetData (ID, name) {
document.getElementById (' id '). value = ID;
document.getElementById (' name '). Value = name;
}
</script>
</head>
<body>
<p>id:<input type= "text" id= "id"/></p>
<p>name:<input type= "text" id= "name"/></p>
<p><input type= "button" value= pop-up "onclick=" onclick (); "/></p>
</body>
</html>
child Window Code: (childwindow.html)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type content=" HTML; Charset=utf-8 "/>
<title> Untitled Document </title>
</head>
<body>
<table border= "1" >
<tr onclick= "Opener.setdata (this.childnodes[0].innerhtml, this.childnodes[1].innerhtml); Window.close ();" ><th>id</th><th>name</th></tr>
<tr onclick= "Opener.setdata (this.childnodes[0].innerhtml, this.childnodes[1].innerhtml); Window.close ();" ><td>1</td><td>Tony</td></tr>
<tr onclick= "Opener.setdata (this.childnodes[0].innerhtml, this.childnodes[1].innerhtml); Window.close ();" ><td>2</td><td>Lily</td></tr>
<tr onclick= "Opener.setdata (this.childnodes[0].innerhtml, this.childnodes[1].innerhtml); Window.close ();" ><td>3</td><td>John</td></tr>
</table>
</body>
</html>
//multi-browser test through
parent Window Code (parent.html)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<title>untitled page</title>
</head>
<body>
<input type= "text" name= "Data_key" id= "Data_key"/>
<input type= "text" name= "Data_value" id= "Data_value"/>
<input type= "button" id= "Open_child_window" value= "List_datas"/>
<script type= "Text/javascript" >
window.onload = function () {
//Get the button to open the child window
var openchildbtn = document.getElementById ("Open_child_window");
//Open new Window function
function Opennewwindow (URL) {
window.open (URL);
}
//Call opens a new window function, specifying a new window address
function Openchildwindow () {
Opennewwindow ("child.html");
}
//Button binding event
if (document.all) {
openchildbtn.attachevent ("onclick", Openchildwindow);//ie
}else{
Openchildbtn.addeventlistener ("click", Openchildwindow)//Non IE
}
}
</script>
</body>
</html>
child Window Code (child.html) This must be named, if you want to change, you need to the parent window code inside the child.html also get rid of
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<title>untitled page</title>
<style type= "Text/css" >
body{font-size:12px}
. Data_list{background: #ddf}
. Data_list Td{background:white}
</style>
</head>
<body>
<table cellspacing= "1" cellpadding= "3" border= "0" class= "data_list" >
<tr>
<td id= "Data_key_1" >data_key_1</td>
<td id= "Data_value_1" >data_value_1</td>
<td><input type= "button" id= "data_submitor_1" value= "Submit"/></td>
</tr>
<tr>
<td id= "data_key_2" >data_key_2</td>
<td id= "data_value_2" >data_value_2</td>
<td><input type= "button" id= "data_submitor_2" value= "Submit"/></td>
</tr>
<tr>
<td id= "Data_key_3" >data_key_3</td>
<td id= "Data_value_3" >data_value_3</td>
<td><input type= "button" id= "Data_submitor_3" value= "Submit"/></td>
</tr>
<tr>
<td id= "Data_key_4" >data_key_4</td>
<TD id= "Data_value_4" >data_value_4</td>
<td><input type= "button" id= "Data_submitor_4" value= "Submit"/></td>
</tr>
</table>
<script type= "Text/javascript" >
//Send data to the parent window
function Senddatatoparent (key,value) {
if (Window.opener && window.opener.document.getElementById ("Data_key") && Window.opener.document.getElementById ("Data_value")) {
window.opener.document.getElementById ("Data_key"). Value = key;
window.opener.document.getElementById ("Data_value"). Value = value;
}
}
window.onload = function () {
//If the parent window has been closed or does not exist, return directly to
if (!window.opener) return;
//Traverse all data
for (Var i=1;i<5;++i) {
//Get Submit button
var btn = document.getElementById ("Data_submitor_" + i.tostring ());
//If the button is valid
if (btn) {
//Button binding event
if (document.all) {//ie
The this pointer in the
//attachevent response function points to the window rather than to the event response object, so a function is needed to implement the object delivery
function Geteventhandle (tag) {
return function () {
var temp = Tag.id.split ("_");
var index = temp[temp.length-1];
senddatatoparent (document.getElementById ("Data_key_" +index). Innerhtml,document.getelementbyid ("Data_value_ "+index). InnerHTML);
}
}
btn.attachevent ("onclick", Geteventhandle (BTN));
}else{//non IE
Btn.addeventlistener ("click", Function () {
var temp = This.id.split ("_");
var index = temp[temp.length-1];
Senddatatoparent (document.getElementById ("Data_key_" +index). Innerhtml,document.getelementbyid ("Data_value_" + index). InnerHTML);
});
}
}
}
}
</script>
</body>
</html>
Click Trigger Event
the object with the parent window ID XX is assigned the value of name is yy
window.parent.document.getElementById (' xx '). Value = Document.getelementsbyname (' YY '). Value;
