日期:2014-05-16 浏览次数:20394 次
?DOM增删改,js日历综合案例实现
?
?
效果图:
??
?
?
??????
?实现此图功能的源代码:
?????Html代码:
????
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>addUser.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/wpCalendar.js"> </script> </head> <body> <div align="center" id="div"> <h1> 显示有的用户界面 </h1> <div style="border: 1px red solid;margin-bottom: 100px; padding: 10px 10%"> <table border="1px" cellpadding="0" cellspacing="0" id="tusers"> <thead> <tr> <th> <input type="checkbox" name="chbk" id="chbk1" onclick="select1(1)"/> </th> <th> 名称 </th> <th> 性别 </th> <th> 邮箱 </th> <th> 出生日期 </th> <th> 操作 </th> </tr> </thead> <tbody id="users"> </tbody> </table> </div> <div style="border: 1px blue solid;"> <form> <table id="divs"> <tbody id="addUsers"> <tr> <td> 用户名: </td> <td> <input type="text" name="name" id="name" /> </td> </tr> <tr> <td> 性别: </td> <td> <select id="sex"> <option value="男"> 男 </option> <option value="女"> 女 </option> </select> </td> </tr> <tr> <td> 邮箱: </td> <td> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td> 出生日期: </td> <td> <input type="text" id="bir" name="bir" /> <input type=button value="点击看我" onclick="showCalendar(this,document.all.bir)"> </td> </tr> <tr id="addu"> <td colspan="2"> <input type="button" value="添加" onclick="addUser()" id="add"/> </td> </tr> <tr id="addu1"> <td colspan="2"> <input type="button" value="修改" id="upduser"/> </td> </tr> </tbody> </table> </form> </div> </div> </body> </html>
?
?
?
Java源代码
??
?