javascript学习笔记—简单的动态选择收件人/联系人

最新推荐文章于 2022-10-29 17:07:07 发布

续写经典

最新推荐文章于 2022-10-29 17:07:07 发布

阅读量2.7k

点赞数 2

分类专栏： javaScript javascript入门文章标签： javascript generator html button border input

本文链接：https://blog.csdn.net/qy1387/article/details/7844525

版权

javaScript 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

javascript入门

20 篇文章 349 订阅

订阅专栏

收件人.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>收件人</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
		function showContact(){
			//用变量接收返回的联系人列表。注意只有模式窗口才能有返回值！
			var returnValue = window.showModalDialog("联系人列表.html","联系人列表","dialogWidth:500px;dialogHeight:400px");
			var txt = document.getElementById("name");
			txt.value = returnValue; //给收件人文本框赋值
		}
  </script>
 </head>

 <body>
	<h1>发送消息/邮件</h1>
	收件人：<input type="text" id="name" /><input type="button" value="选择联系人" οnclick="showContact()" />
 </body>
</html>

联系人列表.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>联系人列表</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	table{
		border:1px solid green;
		border-collapse:collapse;
		width:400px;
		text-align:center;
	}
	table th,td{
		border:1px solid green;
	}

</style>
  <script type="text/javascript">
		function confirmContact(){
			var ck = document.getElementsByName("contact");
			var contactArr = check();
			if(ck.length){
				window.returnValue = contactArr.join(); //如果选中联系人，就将联系人返回
				window.close(); //关闭窗体
			}else{
				alert("请选择一个联系人"); //如果没有选中，就提示选择
			}
		}
		//将选择的联系人放到集合里
		function check(){
			var ck = document.getElementsByName("contact");
			var arr = [];
			for(var i=0;i<ck.length;i++){	
				if(ck[i].checked){
					arr.push(ck[i].value);
				}
			}
			return arr;
		}
  </script>
 </head>

 <body>
  	<h3>选择联系人</h3>
	<table>
		<tr>
			<th>选择</th>
			<th>编号</th>
			<th>姓名</th>
		</tr>
		<tr>
			<td><input type="checkbox" name="contact" value="张龙" /></td>
			<td>1</td>
			<td>张龙</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="contact" value="赵虎" /></td>
			<td>2</td>
			<td>赵虎</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="contact" value="王朝" /></td>
			<td>3</td>
			<td>王朝</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="contact" value="马汉" /></td>
			<td>4</td>
			<td>马汉</td>
		</tr>
		<tr>
			<td colspan="3">
				<input type="button" value="确定" οnclick="confirmContact();" />
			</td>
		</tr>
	</table>
 </body>
</html>