需求:
1、父页面A需要打开一个子页面B获取数据;
2、子页面B可以查询数据库,提取数据列表;
3、向父页面A传数据时,并关闭子页面;
A页面实现代码
<html>
<body >
<table>
<tr>
<td><input type="button" value="打开子页面选取数据"
οnclick="window.open('./B.html','newwindow', 'height=400, width=600, top=200, left=340,resizable:1,toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, status=no')" />
</td>
</tr><tr>
<td><input type="text" id="style_ID" name="style_ID"/></td>
<td> <input type="text" name="material_Name" id="material_Name" style="" readonly="readonly"/><td>
<td> <input type="text" name="model" id="model" style="" readonly="readonly"/><td>
<td> <input type="text" name="unit" id="unit" style="" readonly="readonly"/><td>
</tr>
</body>
</html>
B页面实现代码
<html>
<script language="JavaScript">
var s_ID;
var material_Name;
var model;
var uu;
function setE()
{
var resualt3=false;
var a;
for(var i=0;i<document.find.style_ID.length;i++)
{
if(document.find.style_ID[i].checked)
{
a=document.find.style_ID[i].value;
resualt3=true;
}
}
if(!resualt3)
{
alert("请选择材料");
return false;
}
window.opener.document.getElementById("style_ID").value=s_ID;
window.opener.document.getElementById("material_Name").value=material_Name;
window.opener.document.getElementById("model").value=model;
window.opener.document.getElementById("unit").value=uu;
alert(a);
window.close();
}
</script>
<body >
<input type="submit" value="查询" />可以通过数据库查询出数据,即页面可以刷新
<form method="post" action="" name="find">
<table border='1'>
<tr>
<td>选择</td>
<td>编号</td>
<td>材料名</td>
<td>类型</td>
<td>单位</td>
</tr>
<tr style="height: 10PX"
onMouseDown="
s_ID=this.cells.item(1).innerHTML;
material_Name=this.cells.item(2).innerHTML;
model=this.cells.item(3).innerHTML;
uu=this.cells.item(4).innerHTML;" >
<td><input type="radio" name="style_ID" value="1"/></td>
<td>11</td>
<td>I级钢</td>
<td>类型1</td>
<td>吨</td>
</tr>
<tr style="height: 10PX"
onMouseDown="
s_ID=this.cells.item(1).innerHTML;
material_Name=this.cells.item(2).innerHTML;
model=this.cells.item(3).innerHTML;
uu=this.cells.item(4).innerHTML;" >
<td><input type="radio" name="style_ID" value="2"/></td>
<td>21</td>
<td>II级钢</td>
<td>类型2</td>
<td>吨</td>
</tr>
<tr style="height: 10PX"
onMouseDown="
s_ID=this.cells.item(1).innerHTML;
material_Name=this.cells.item(2).innerHTML;
model=this.cells.item(3).innerHTML;
uu=this.cells.item(4).innerHTML;" >
<td><input type="radio" name="style_ID" value="3"/></td>
<td>31</td>
<td>水泥</td>
<td>散装</td>
<td>吨</td>
</tr>
<tr style="height: 10PX"
onMouseDown="
s_ID=this.cells.item(1).innerHTML;
material_Name=this.cells.item(2).innerHTML;
model=this.cells.item(3).innerHTML;
uu=this.cells.item(4).innerHTML;" >
<td><input type="radio" name="style_ID" value="3"/></td>
<td>31</td>
<td>水泥</td>
<td>袋装</td>
<td>袋</td>
</tr>
</table>
</form>
<div align="center">
<input type="button" value="确定选择,并关闭窗口" onClick="setE();" />
</div>
</body>
</html>
如果页面B,想实现同时先选择多条记录,例如B页面的每条记录后面在选择时就要填入购买数量和单价等,我们就有需要在打开时一次就选完填完数量和单价等,就要使用json的原理了,把复选中的数据拼起来。