javascript實(shí)現(xiàn)信息增刪改查的方法

更新時(shí)間：2015年07月25日 16:31:31 作者：whylyq

這篇文章主要介紹了javascript實(shí)現(xiàn)信息增刪改查的方法,實(shí)例分析了javascript操作頁面元素實(shí)現(xiàn)針對(duì)頁面信息的增刪改查功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)信息增刪改查的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: