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 相关文章推荐
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
vue分页插件的使用方法
Dec 25 Javascript
JS自定义滚动条效果
Mar 13 Javascript
原生JavaScript实现进度条
Feb 19 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
色色整理的PHP面试题集锦
2012/03/08 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
对python的bytes类型数据split分割切片方法
2018/12/04 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
python实现图片中文字分割效果
2019/07/22 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
物流管理专业毕业生自荐信
2014/03/04 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
公司员工手册范本
2015/05/14 职场文书
运动员入场词
2015/07/18 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL