页面之间值传递

来源：互联网发布：关注黄金价格的软件编辑：程序博客网时间：2024/06/05 02:56

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格的增删改</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<style type="text/css">
.pinfo,.showInfo{
width:600px;
margin: auto;
text-align: center;
}

.tinfo,.info{
text-align: center;
width: 600px;
}
.showinfo{
margin-top:30px;
}
caption,th{
background-color: AliceBlue;
}
table{
border-collapse:collapse;
}
td{
border:1px blue solid;
}
</style>

<script type="text/javascript">
function addInfo(){
var tableNode=document.getElementById("info");
var trNode=document.createElement("tr");

var tdNode1=document.createElement("td");
tdNode1.innerHTML=document.getElementById("user").value;
var tdNode2=document.createElement("td");
tdNode2.innerHTML=document.getElementById("tel").value;
var tdNode3=document.createElement("td");
tdNode3.innerHTML=document.getElementById("addr").value;

var tdNode4=document.createElement("td");
var inputNode=document.createElement("input");
inputNode.setAttribute("type", "button");
inputNode.setAttribute("value", "删除");
inputNode.setAttribute("onclick", "deleteNode(this)");
tdNode4.appendChild(inputNode);

var inputNode2=document.createElement("input");
inputNode2.setAttribute("type", "button");
inputNode2.setAttribute("value", "修改");
inputNode2.setAttribute("onclick", "updateNode(this)");
tdNode4.appendChild(inputNode2);

trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
trNode.appendChild(tdNode3);
trNode.appendChild(tdNode4);

tableNode.appendChild(trNode);
}
function deleteNode(node){
var trNode=node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
//修改功能，页面传值
function updateNode(node){
//window.open("HomeWork2.html", "修改信息", "height='400',width='300'");
//window.open ('HomeWork2.html',window,'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
//将node传递到第二个页面
window.showModalDialog("HomeWork2.html",node,"status:no;dialogWidth=800px;dialogHeight=200px");
}

function setValue(value1,value2,value3){
this.cells[0]=value1;
/* alert(value1);
alert(value2);
alert(value3); */
}

</script>
</head>

<body>
<div class="pinfo">
<table class="tinfo">
<caption>添加的数据</caption>
<tr>
<td>用户名</td>
<td>电话</td>
<td>地址</td>
</tr>
<tr>
<td>
<input id="user" type="text" name="user"/>
</td>
<td>
<input id="tel" type="text" name="tel"/>
</td>
<td>
<input id="addr" type="text" name="addr"/>
</td>
</tr>
<tr>

<td colspan="3" align="right">
<input type="button" value="添加" onclick="addInfo()"/>
</td>
</tr>

</table>
</div>

<div class="showInfo">
<table class="info" id="info">
<tr>
<th>用户名</th>
<th>电话</th>
<th>地址</th>
<th>操作</th>
</tr>
</table>

</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>修改页面</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<script type="text/javascript">
function goback(){
var user=document.getElementById("user").value;
var tel=document.getElementById("tel").value;
var addr=document.getElementById("addr").value;
//alert(user+tel+addr);
//第二个页面接收到第一个地面传递过来的node
var sdata=window.dialogArguments;
//alert(sdata.value);
var trNode=sdata.parentNode.parentNode;
//alert(trNode.childNodes[0].innerHTML)
trNode.childNodes[0].innerHTML=user;
trNode.childNodes[1].innerHTML=tel;
trNode.childNodes[2].innerHTML=addr;

window.close();
}
</script>
</head>

<body>
<table>
<tr>
<td>用户名</td>
<td>电话</td>
<td>地址</td>
</tr>
<tr>
<td>
<input id="user" type="text" name="user"/>
</td>
<td>
<input id="tel" type="text" name="tel"/>
</td>
<td>
<input id="addr" type="text" name="addr"/>
</td>
<td>
<input type="button" value="确定" onclick="goback()"/>
</td>
</tr>
</table>
</body>
</html>

0 0