`
ocw356og
  • 浏览: 24649 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

 
阅读更多

  DOM增删改,js日历综合案例实现 效果图:
  
  实现此图功能的源代码:
  Html代码:
     addUser.html          显示有的用户界面          名称   性别   邮箱   出生日期   操作              用户名:        性别:     男   女       邮箱:        出生日期:                        
  Java源代码
     window.onload = function (){ document.getElementById("addu1").style.display="no ne"; } 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="non e"; document.getElementById("addu1").style.display="bl ock"; var utr = aupdate.parentNode.parentNode; var utrs= utr.childNodes; document.getElementById("name").value=utrs[1].inne rHTML; document.getElementById("sex").value=utrs[2].inner HTML; document.getElementById("email").value=utrs[3].inn erHTML; document.getElementById("bir").value=utrs[4].inner HTML; 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="no ne"; document.getElementById("addu").style.display="blo ck"; } } } function select1(oper){ var arr=document.getElementsByName("chbk"); for(var i=0;i 
  日历控件  wpCalendar.js
  新建一个js文件 下载解压包,复制代码。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics