javascript实现信息增删改查的方法
本文实例讲述了javascript实现信息增删改查的方法。分享给大家供大家参考。具体实现方法如下：
<body>
<divalign="center">
<h1>显示所有的用户界面</h1>
<divstyle="border:1pxredsolid;margin-bottom:100px;padding:10px10%;">
<tableborder="1px"cellpadding="0"cellspacing="0"id="tusers">
<thead>
<tr><th><inputtype="checkbox"name="chbk"id="chbk1"onclick="selectAll()"/></th>
<th>名称</th>
<th>性别</th>
<th>邮箱</th>
<th>出生日期</th>
<th>操作</th>
</tr>
</thead>
<tbodyid="users">
</tbody>
</table>
<divid="pages"></div>
</div>
<divstyle="border:1pxbluesolid;">
<formaction="">
<tableid="divs">
<tbodyid="addUsers">
<tr>
<td>用户名:</td>
<td><inputtype="text"name="name"id="name"/></td>
</tr>
<tr>
<td>性别:</td>
<td><selectid="sex">
<optionvalue="男">男</option>
<optionvalue="女">女</option>
</select>
</td>
</tr>
<tr>
<td>邮箱</td>
<td><inputtype="text"name="email"id="email"/></td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<inputtype="text"id="bir"name="bir"/>
<inputtype=buttonvalue="添加日期"onclick="showCalender(this,document.all.bir)"/>
</td>
</tr>
<trid="addu">
<tdcolspan="2"><inputtype="button"value="添加"onclick="addUser()"id="add"/></td>
</tr>
<trid="addu1">
<tdcolspan="2"><inputtype="button"value="修改"id="upduser"/></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
<script>
window.onload=function(){
alert("onload");
document.getElementById("addu1").style.display="none";
}
functionselectAll(){
varusers=document.getElementById("users");
varips=users.getElementsByTagName("input");
varchbk=document.getElementById("chbk1");
for(vari=0;i<ips.length;i++){
ips[i].setAttribute("checked",chbk.getAttribute("checked"));
}
}
functionaddUser(){
alert("add");
varname=document.getElementById("name").Value;
varsex=document.getElementById("sex").Value;
varemail=document.getElementById("email").Value;
varbir=document.getElementById("bir").Value;
vartusers=document.getElementById("tusers").Value;
vartr1=document.createElement("tr");
varcbk=document.createElement("td");
vartname=document.createElement("td");
vartsex=document.createElement("td");
vartemail=document.createElement("td");
vartbir=document.createElement("td");
vartoper=document.createElement("td");
varcbk1=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));
varadelete=document.createElement("a");
varaupdate=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);
varusers=document.getElementById("users");
users.appendChild(tr1);
tusers.appendChild(users);
adelete.onclick=function(){
users.removeChild(adelete.parentNode.parentNode);
}
aupdate.onclickfunction(){
document.getElementById(addu).style.display="none";
document.getElementById(addu1).style.display="block";
varutr=aupdate.parentNode.parentNode;
varutrs=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;
varupUser=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()
}
varindexPage=document.createElement("a");
varupPage=document.createElement("a");
vardownPage=document.createElement("a");
varendPage=document.createElement("a");
varnowpage=1;
functiontestPage(){
vartbodyUsers=document.getElementById("users");
vartrUsers=document.getElementById("tr");
varcountRecord=trUsers.length;
varPAGESIZE=2;
varcountPage=(countRecord%PAGESIZE==0?countRecord/PAGESIZE:Math.ceil(countRecord/PAGESIZE));
varpages=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);
}
varstartindex=(nowpage-1)*PAGESIZE;
varendindex=startindex+PAGESIZE;
PageInfo(startindex,endindex,countRecord,trUsers);
}
downPage.onclick=function(){
if(nowpage+1>=countPage){
nowpage=countPage;
}else{
nowpage=+1;
}
varstartindex=(nowpage-1)*PAGESIZE;
varendindex=startindex+PAGESIZE;
PageInfo(startindex,endindex,countRecord,trUsers);
}
endPage.onclick=function(){
if(nowpage>1){
varstartindex=(nowpage-1)*PAGESIZE;
for(vari=0;i<countRecord;i++){
if(i<startindex){
trUsers[i].style.display="none";
}else{
trUsers[i].style.display="block";
}
}
}else{
indexPageInfo(countRecord,trUsers);
}
}
}
functionindexPageInfo(countRecord,trUsers){
if(countRecord<=2){
for(vari=0;i<PAGESIZE;i++){
trUsers[i].style.display="block";
}
}else{
for(vari=2;i<countRecord;i++){
trUsers[i].style.display="none";
}
}
}
functionPageInfo(startindex,endindex,countRecord,trUsers){
for(vari=0;i<countRecord;i++){
if(i>=startindex&&i<endindex){
trUsers[i].style.display="block";
}else{
trUsers[i].style.display="none";
}
}
}
functiongetPages(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","#");
varpages=document.getElementById("pages");
pages.appendChild(indexPage);
pages.appendChild(upPage);
pages.appendChild(downPage);
pages.appendChild(endPage);
}
</script>
希望本文所述对大家的javascript程序设计有所帮助。