页面交互与数据查询-优快云博客

页面通过按钮触发子页面加载，并实现材料数据的选择与查询功能，包括数据库查询与数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A页面实现代码

<html>
<body >
<table>
<tr>
<td><input type="button" value="打开子页面选取数据"
onclick="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>