javascript實現信息增刪改查的方法

2024-05-06 16:23:41

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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>