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

kos — Mon, 23 Nov 2009 13:09:17 +0000

　　由于工作需要，做了一个通讯录的选人功能，不用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> </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;"></td>       </tr>     </table></td>   </tr> </table> </div> </body> </html> 




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

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

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

散人笔记 » 子页面和父页面传值

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