超强 DOM增删改,js日历综合案例实现

来源：互联网发布：java遗传算法编程 pdf 编辑：程序博客网时间：2024/04/28 22:19

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源代码

<script type="text/javascript">     window.onload = function (){        document.getElementById("addu1").style.display="none";             }     function addUser(){          var name = document.getElementById("name").value;          var sex = document.getElementById("sex").value;          var email = document.getElementById("email").value;          var bir = document.getElementById("bir").value;                    //获取表格节点对象           var tusers = document.getElementById("tusers");                 //创建行         var tr1 = document.createElement("tr");         var cbk = document.createElement("td");         var tname = document.createElement("td");         var tsex = document.createElement("td");         var temail = document.createElement("td");         var tbir = document.createElement("td");         var toper = document.createElement("td");                    var cbk1 = document.createElement("input");         cbk1.setAttribute("type","checkbox");         cbk1.setAttribute("name","chbk");                  cbk.appendChild(cbk1);         tname.appendChild(document.createTextNode(name));         tsex.appendChild(document.createTextNode(sex));         temail.appendChild(document.createTextNode(email));         tbir.appendChild(document.createTextNode(bir));         var adelete = document.createElement("a");         var aupdate = document.createElement("a");                  adelete.setAttribute("href","#");         aupdate.setAttribute("href","#");                  adelete.appendChild(document.createTextNode("删除 |"));         aupdate.appendChild(document.createTextNode("修改"));         toper.appendChild(adelete);         toper.appendChild(aupdate)                        //往行中添加        tr1.appendChild(cbk);        tr1.appendChild(tname);        tr1.appendChild(tsex);        tr1.appendChild(temail);        tr1.appendChild(tbir);        tr1.appendChild(toper);               var users =  document.getElementById("users");       users.appendChild(tr1);       tusers.appendChild(users);                        //删除操作          adelete.onclick = function(){             users.removeChild(adelete.parentNode.parentNode);          }                           //修改操作          aupdate.onclick = function(){               document.getElementById("addu").style.display="none";               document.getElementById("addu1").style.display="block";                          var utr = aupdate.parentNode.parentNode;           var utrs= utr.childNodes;                      document.getElementById("name").value=utrs[1].innerHTML;           document.getElementById("sex").value=utrs[2].innerHTML;           document.getElementById("email").value=utrs[3].innerHTML;           document.getElementById("bir").value=utrs[4].innerHTML;                      var upUser = document.getElementById("upduser");                      upUser.onclick = function(){           utr.childNodes[1].innerHTML = document.getElementById("name").value;           utr.childNodes[2].innerHTML = document.getElementById("sex").value;           utr.childNodes[3].innerHTML = document.getElementById("email").value           utr.childNodes[4].innerHTML = document.getElementById("bir").value           document.getElementById("addu1").style.display="none";           document.getElementById("addu").style.display="block";           }                    }     }       function select1(oper){        var arr=document.getElementsByName("chbk");          for(var i=0;i<arr.length;i++){            switch(oper){              case 1:               arr[i].checked=oper;                break;            }        }          }</script>

日历控件 wpCalendar.js

新建一个js文件下载解压包，复制代码。