本文實例講述了javascript實現信息增刪改查的方法。分享給大家供大家參考。具體實現方法如下:
<body> <div align="center"> <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="selectAll()"/></th> <th>名稱</th> <th>性別</th> <th>郵箱</th> <th>出生日期</th> <th>操作</th> </tr> </thead> <tbody id="users"> </tbody> </table> <div id="pages"></div> </div> <div style="border: 1px blue solid;"> <form action=""> <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="showCalender(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> <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程序設計有所幫助。