showModalDialog的应用_数据的修改和删除

最新推荐文章于 2024-08-22 14:32:34 发布

田江

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量230

点赞数

分类专栏： JavaScript从入门到精通文章标签： javascript web前端开发 web应用 web开发

本文链接：https://blog.csdn.net/jiang7701037/article/details/78965621

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 80 订阅

订阅专栏

解释：

以下代码只能在IE中使用，因为，showModalDialog只有IE浏览器支持

效果图：

代码：

1、employee.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body >
	<table id="t">
		<tr>
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
			<td colspan="2">操作</td>
		</tr>
		<tr><td>狗蛋</td><td>男</td><td>18</td><td><input class="upCls" type="button" value="修改"  /></td>
			<td><input class="delCls" type="button" value="删除"  /></td>
		</tr>
		<tr><td>二愣子</td><td>女</td><td>19</td><td ><input class="upCls" type="button" value="修改"  /></td>
			<td ><input class="delCls" type="button" value="删除"  /></td>
		</tr>
	</table>
</body>
</html>
<script type="text/javascript">

window.onload = function(){
	var updateBtns =  document.getElementsByClassName("upCls");
	for(var i=0;i<updateBtns.length;i++){
		updateBtns[i].onclick = function(){
			//1、获取表格里的数据
			var employee = {
				name:this.parentNode.parentNode.childNodes[0].innerHTML,
				sex: this.parentNode.parentNode.childNodes[1].innerHTML,
				age: this.parentNode.parentNode.childNodes[2].innerHTML
			};
			
			//2、把获取到的姓名传给子页面（showModalDigLog函数），接收子页面传来的数据
			var newEmployee = window.showModalDialog("employeeDetailjson.html",employee,"dialogWidth=300px;dialogHeight=250px");
			
			//3、用子页面传来的数据修改表格里的数据			
			this.parentNode.parentNode.childNodes[0].innerHTML=newEmployee.name;
			this.parentNode.parentNode.childNodes[1].innerHTML=newEmployee.sex;
			this.parentNode.parentNode.childNodes[2].innerHTML=newEmployee.age;
		}
	}
	
	var delBtns =  document.getElementsByClassName("delCls");
	for(var i=0;i<delBtns.length;i++){
		delBtns[i].onclick = function(){
			if(confirm("您确认要删除吗？")){
				this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
			}
		}
	}
}

</script>

2、employeeDetailjson.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body >
	<table>
		<tr>
			<td>姓名</td>
			<td><input id="name" type="text"/></td>
		</tr>
		<tr>
			<td>性别</td>
			<td><input id="sex"  type="text"/></td>
		</tr>
		<tr>
			<td>年龄</td>
			<td><input id="age"  type="text"/></td>
		</tr>
	</table>
	<input id="btn" type="button" value="保存"  />
</body>
</html>
<script type="text/javascript">

window.onload = function(){
	//1、获取父页面传来的数据（参数）
	var employee = window.dialogArguments
	document.getElementById("name").value = employee.name;
	document.getElementById("sex").value = employee.sex;
	document.getElementById("age").value = employee.age;
	
	document.getElementById("btn").onclick = function(){
		//2、把文本框的内容返回给父页面
		var employee = {
			name:document.getElementById("name").value,
			sex:document.getElementById("sex").value,
			age:document.getElementById("age").value
		};
		
		window.returnValue = employee;		
		
		//3、关闭自己
		window.close();
	}
}

</script>

田江

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
showModalDialog的应用_数据的修改和删除

解释：以下代码只能在IE中使用，因为，showModalDialog只有IE浏览器支持效果图：代码：1、employee.html Document 姓名性别年龄操作狗蛋男18 二愣子女19 window.onload
复制链接

扫一扫

专栏目录