<body> <div> <h1>显示所有的用户界面</h1> <div> <table cellpadding="0" cellspacing="0"> <thead> <tr><th><input type="checkbox"/></th> <th>名称</th> <th>性别</th> <th>邮箱</th> <th>出生日期</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <div></div> </div> <div> <form action=""> <table> <tbody> <tr> <td>用户名:</td> <td><input type="text"/></td> </tr> <tr> <td>性别:</td> <td><select> <option value="男">男</option> <option value="女">女</option> </select> </td> </tr> <tr> <td>邮箱</td> <td><input type="text"/></td> </tr> <tr> <td>出生日期:</td> <td> <input type="text"/> <input type=button value="添加日期"/> </td> </tr> <tr> <td colspan="2"><input type="button" value="添加"/></td> </tr> <tr> <td colspan="2"><input type="button" value="修改" /></td> </tr> </tbody> </table> </form> </div> </div> </body> <script> window.onload = function(){ alert("onload"); document.getElementById("addu1").style.display = "none"; } function selectAll(){ var users = document.getElementById("users"); var ips = users.getElementsByTagName("input"); var chbk = document.getElementById("chbk1"); for(var i=0;i<ips.length;i++){ ips[i].setAttribute("checked",chbk.getAttribute("checked")); } } function addUser(){ alert("add"); 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").Value; 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"; } } testPage() } var indexPage = document.createElement("a"); var upPage = document.createElement("a"); var downPage = document.createElement("a"); var endPage = document.createElement("a"); var nowpage = 1; function testPage(){ var tbodyUsers = document.getElementById("users"); var trUsers = document.getElementById("tr"); var countRecord = trUsers.length; var PAGESIZE = 2; var countPage = (countRecord%PAGESIZE ==0?countRecord/PAGESIZE:Math.ceil(countRecord/PAGESIZE)); var pages=document.getElementById("pages"); if(!pages.hasChildNodes()){ getPages(nowpage); } index.onclik=function(){ noepage=1; indexPageInfo(countRecord,trUsers); } upPage.onclick=function(){ if(nowpage-1>1){ nowpage-=1; }else{ nowpage=1; indexPageInfo(countRecord,trUsers); } var startindex =(nowpage-1)*PAGESIZE; var endindex=startindex+PAGESIZE; PageInfo(startindex,endindex,countRecord,trUsers); } downPage.onclick=function(){ if(nowpage+1>=countPage){ nowpage=countPage; }else{ nowpage=+1; } var startindex =(nowpage-1)*PAGESIZE; var endindex=startindex+PAGESIZE; PageInfo(startindex,endindex,countRecord,trUsers); } endPage.onclick=function(){ if(nowpage>1){ var startindex =(nowpage-1)*PAGESIZE; for(var i=0;i<countRecord;i++){ if(i<startindex){ trUsers[i].style.display="none"; }else{ trUsers[i].style.display="block"; } } }else{ indexPageInfo(countRecord,trUsers); } } } function indexPageInfo(countRecord, trUsers) { if (countRecord <= 2) { for ( var i = 0; i < PAGESIZE; i++) { trUsers[i].style.display = "block"; } } else { for ( var i = 2; i < countRecord; i++) { trUsers[i].style.display = "none"; } } } function PageInfo(startindex, endindex, countRecord, trUsers) { for ( var i = 0; i < countRecord; i++) { if (i >= startindex && i < endindex) { trUsers[i].style.display = "block"; } else { trUsers[i].style.display = "none"; } } } function getPages(numpage) { indexPage.appendChild(document.createTextNode("首页")); indexPage.setAttribute("href", "#"); upPage.appendChild(document.createTextNode("上一页")); upPage.setAttribute("href", "#"); downPage.appendChild(document.createTextNode("下一页")); downPage.setAttribute("href", "#"); endPage.appendChild(document.createTextNode("末页")); endPage.setAttribute("href", "#"); var pages = document.getElementById("pages"); pages.appendChild(indexPage); pages.appendChild(upPage); pages.appendChild(downPage); pages.appendChild(endPage); } </script>
javascript实现信息增删改查的方法
内容版权声明：除非注明，否则皆为本站原创文章。