javascript實作資訊增刪改查的方法_javascript技巧
本文實例講述了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程式設計有所幫助。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題











如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

Go語言是一種高效、簡潔且易於學習的程式語言,因其在並發程式設計和網路程式設計方面的優勢而備受開發者青睞。在實際開發中,資料庫操作是不可或缺的一部分,本文將介紹如何使用Go語言實作資料庫的增刪改查操作。在Go語言中,我們通常會使用第三方函式庫來操作資料庫,例如常用的sql套件、gorm等。這裡以sql包為例介紹如何實作資料庫的增刪改查操作。假設我們使用的是MySQL資料庫。

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。
