javascript實作資訊增刪改查的方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript實作資訊增刪改查的方法_javascript技巧

May 16, 2016 pm 03:49 PM

javascript 資訊增刪改查

本文實例講述了javascript實現資訊增刪改查的方法。分享給大家供大家參考。具體實作方法如下：

&lt;body&gt;
&lt;div align="center"&gt;
 &lt;h1&gt;显示所有的用户界面&lt;/h1&gt;
 &lt;div style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%;"&gt;
 &lt;table border="1px" cellpadding="0" cellspacing="0" id="tusers"&gt;
 &lt;thead&gt;
 &lt;tr&gt;&lt;th&gt;&lt;input type="checkbox" name="chbk" id="chbk1" onclick="selectAll()"/&gt;&lt;/th&gt;
 &lt;th&gt;名称&lt;/th&gt;
  &lt;th&gt;性别&lt;/th&gt;
  &lt;th&gt;邮箱&lt;/th&gt;
   &lt;th&gt;出生日期&lt;/th&gt;
   &lt;th&gt;操作&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody id="users"&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;div id="pages"&gt;&lt;/div&gt; 
 &lt;/div&gt; 
 &lt;div style="border: 1px blue solid;"&gt;
  &lt;form action=""&gt;
  &lt;table id="divs"&gt;
  &lt;tbody id="addUsers"&gt;
  &lt;tr&gt;
  &lt;td&gt;用户名:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="name" id="name"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;性别:&lt;/td&gt;
  &lt;td&gt;&lt;select id="sex"&gt;
  &lt;option value="男"&gt;男&lt;/option&gt;
  &lt;option value="女"&gt;女&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;邮箱&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="email" id="email"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;出生日期:&lt;/td&gt;
  &lt;td&gt;
  &lt;input type="text" id="bir" name="bir"/&gt;
  &lt;input type=button value="添加日期" onclick="showCalender(this,document.all.bir)"/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="addu"&gt;
  &lt;td colspan="2"&gt;&lt;input type="button" value="添加" onclick="addUser()" id="add"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="addu1"&gt;
  &lt;td colspan="2"&gt;&lt;input type="button" value="修改" id="upduser" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/form&gt; 
 &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
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&lt;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&#63;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&gt;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&gt;=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&gt;1){
var startindex =(nowpage-1)*PAGESIZE;
for(var i=0;i&lt;countRecord;i++){
if(i&lt;startindex){
trUsers[i].style.display="none";
}else{
trUsers[i].style.display="block";
}
}
}else{
indexPageInfo(countRecord,trUsers);
}
}
}
function indexPageInfo(countRecord, trUsers) {
if (countRecord &lt;= 2) {
for ( var i = 0; i &lt; PAGESIZE; i++) {
trUsers[i].style.display = "block";
}
} else {
for ( var i = 2; i &lt; countRecord; i++) {
trUsers[i].style.display = "none";
}
}
}
function PageInfo(startindex, endindex, countRecord, trUsers) {
for ( var i = 0; i &lt; countRecord; i++) {
if (i &gt;= startindex && i &lt; 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);
}
&lt;/script&gt;

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn