javascript实现信息增删改查的方法


Posted in Javascript onJuly 25, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
jQuery菜单插件用法实例
Jul 25 #Javascript
javascript单例模式的简单实现方法
Jul 25 #Javascript
JavaScript类继承及实例化的方法
Jul 25 #Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 #Javascript
javascript去掉代码里面的注释
Jul 24 #Javascript
Jquery简单分页实现方法
Jul 24 #Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 #Javascript
You might like
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
利用python获得时间的实例说明
2013/03/25 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python字符串的修改方法实例
2019/12/19 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
工程业务员岗位职责
2013/12/31 职场文书
银行存款证明样本
2014/01/17 职场文书
承认错误的检讨书
2014/01/30 职场文书
座谈会主持词
2014/03/20 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2019个人半年工作总结
2019/06/21 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android