需求:
需求 1.创建一个页面(window.html)
有两个输入项和一个按钮
按钮上有一个事件,弹出一个新窗口 open
2.创建弹出页面(user.html)
表格
每一行有一个按钮、编号和姓名
按钮上有一个事件,把当前的编号和姓名赋值到第一个页面相应的位置
window.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window</title>
</head>
<body>
编号:<input type="text" id="zzzid" /><br/>
姓名:<input type="text" id="namid" /><br/>
<input type="button" value="choose" onclick="cbz1()"/>
<script type="text/javascript">
//实现窗口弹出的方法
function cbz1(){
//open方法
window.open("user.html","","width=200,height=300");
}
</script>
</body>
</html>
user.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>user</title>
</head>
<body>
<table border="1" bordercolor="blue">
<tr>
<td>操作</td>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s1('95','CC')"/></td>
<td>95</td>
<td>CC</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s1('08','BB')"/></td>
<td>08</td>
<td>BB</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s1('22','ZZ')"/></td>
<td>22</td>
<td>ZZ</td>
</tr>
</table>
<script type="text/javascript">
function s1(num1,name1){
//需要把num1和name1赋值到window.html页面
//跨页面的操作 opener:得到创建这个窗口的窗口,即window.html页面
var pwin = window.opener;
pwin.document.getElementById("zzzid").value = num1;
pwin.document.getElementById("namid").value = name1;
//关闭user.html
window.close();
}
</script>
</body>
</html>
效果: