您的位置：首页 > Web前端 > JavaScript

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

2012-08-08 17:51 218 查看

收件人.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="选择联系人" onclick="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="确定" onclick="confirmContact();" />
</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航