散人笔记 » js实现通讯录选人操作（支持单选和全选及删除）

js实现通讯录选人操作（支持单选和全选及删除）

日期：2009年11月23日作者：kos

来自分类：JAVASCRIPT查看：(141)评论：(5)

　　由于工作需要，做了一个通讯录的选人功能，不用action提交，只通过js传值来解决问题，暂时还不知道有没有bug,希望发现有bug的朋友给点提醒，同时收集更好的建议！

具体功能如下：
　　1、实现通讯录的分组添加，并不重复添加信息相同的人员（比如其中一员在两个组里面都有，只添加一次）；
　　2、对每一组人员可进行批量添加和批量删除，也可单个添加和单个删除；
　　3、对是否已添加进去的人员作了样式分辨，一目了然；

先把效果展示一下：



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> td{ line-height:24px; font-size:12px;} span{ color:#FF0000; font-size:12px; line-height:22px;} </style> </head>  <body> <table border="0" cellspacing="0" cellpadding="0">   <tr>     <td><table width="100%" border="0" cellspacing="0" cellpadding="0">         <tr>           <td>名字：</td>           <td><input name="textfield" type="text" id="phoneName" value="张三,李四," size="100"  disabled="disabled" ></td>         </tr>         <tr>           <td>号码： </td>           <td><input name="textfield2" type="text" id="phoneId" value="Id_1,Id_2," size="100"  disabled="disabled" ></td>         </tr>       </table>     </td>     <td><input type="button" name="Submit" value="通讯录" onClick="document.getElementById('floatDiv').style.display = 'block'"></td>   </tr>   <tr>     <td>选择人员时请点击<span style=" cursor:pointer; padding:10px; font-size:12px; font-weight:bold; color:#FF0000" onClick="document.getElementById('floatDiv').style.display = 'block'">[通讯录]</span>按钮</td>     <td>&nbsp;</td>   </tr> </table> <div style="width:300px; height:240px; border:1px #CCCCCC solid; background:#F0F0F0; display:none" id="floatDiv"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">   <tr>     <td height="20" align="right"><a style="padding-right:4px; cursor:pointer;" onClick="document.getElementById('floatDiv').style.display = 'none'">关闭</a></td>   </tr>   <tr>     <td align="left" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">       <tr>         <td width="100" align="left" valign="top" style="padding:10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">   <tr>     <td><a href="http://www.uideas.cn/download/t0.html" target="childHtml">总经理</a></td>   </tr>   <tr>     <td><a href="http://www.uideas.cn/download/t1.html" target="childHtml">部门经理</a></td>   </tr>   <tr>     <td><a href="http://www.uideas.cn/download/t2.html" target="childHtml">所有员工</a></td>   </tr> </table> </td>         <td align="left" valign="top" style="padding:10px;"><iframe style="width:100%; height:100%;" frameborder="0" scrolling="no" src="http://www.uideas.cn/download/t0.html" id="childHtml" name="childHtml"></iframe></td>       </tr>     </table></td>   </tr> </table> </div> </body> </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

以上只是对功能进行了展示，所以样式方面没作更多考虑，具体能用到的地方再对样式作一些修饰就行了！

相关下载：
　　完整例子下载：addressBook.rar

上一篇：几个常用的字符串处理函数

下一篇：有关js弹出层位置随鼠标点击而改变的问题

网友评论：

共 5 条评论

wuSH -- 2009/11/25 10:29:55

这是一个很牛XX的效果

【回复此评论】

LQ -- 2009/11/24 17:38:34

顶

【回复此评论】

kos　-　2009/11/24 19:45:28

以后有啥想法多给我点，我好把整成功能！感谢支持！

【回复此评论】

A.Ke -- 2009/11/24 10:40:27

恩，不错，以后做起来就方便多了

【回复此评论】

lavenxun -- 2009/11/24 09:15:00

不错，有点好耍，呵呵

【回复此评论】

一	二	三	四	五	六	日
		2010-07月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31