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文件 下载解压包,复制代码。
实现此图功能的源代码:
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文件 下载解压包,复制代码。