JS结合bootstrap实现基本的增删改查功能

提出问题：如何利用原生的js实现基本的增删改查功能？？？

解决问题
假如你已经对JS有一定基础
假如你对bootstrap有一定基础

下面是具体的例子，

包含两个文件（index.jsp  和  index.js）

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
 
 
 
 
 
 
 
 

 
 
 
 

 
练习一
 

  新增
  删除
  编辑
  查询
  
  
  
 
 

  

  
序号
  
工号
  
姓名
  
性别
  
密码
  
年龄
  
出生日期
  
 
 

 
 

 
 
 
  
  
   
   ×
  
  

   新增用户
  
  
  
  工号:
   
   姓名:
   
   性别:
   
   密码:
   
   年龄:
   
   出生日期:
   
  
  
  保存
  
  提交更改
  
  
 
 
 
 
 
 
 
 
 复制代码
 复制代码
 //存放所有用户
 var users = users || {};
 //操作类型
 var operateType = "";
 //存放搜索对象
 var searchUsers = searchUsers || {};
 //用户构造方法
 var User = {
  Create:function(code,userName,sex,passWord,age,birthday){
  this.code = code;
  this.userName = userName;
  this.sex = sex;
  this.passWord = passWord;
  this.age = age;
  this.birthday = birthday;
  },
  //添加用户
  addUserdata:function(){
  if(this.code != ""){
   users[this.code] = this;
  }
  },
  //删除用户
  deleteUserdata:function (){
  for(var i in users){
   if(this.code == users[i].code){
   delete users[i];
   }
  }
  },
  //编辑用户
  editUserdata:function(){
  for(var i in users){
   if(this.code == users[i].code){
   users[i].userName = this.userName;
   users[i].sex = this.sex;
   users[i].passWord = this.passWord;
   users[i].birthday = this.birthday;
   users[i].age = this.age;
   }
  }
  },
  //查找用户
  findUserdata:function(data){

  for(var i in users){
   if(data.code.indexOf(users[i].code) >= 0 || 
    data.userName.indexOf(users[i].userName) >= 0){
   searchUsers[users[i].code] = users[i];
   refreshDatas(searchUsers);
   }
  }
  }
 };

 function New(aClass,aParams){
 function new_(){
  aClass.Create.apply(this,aParams);
 }
 new_.prototype = aClass;
 return new new_();
 }

 //bootstrap模态框事件
 $('#myModal').on('hide.bs.modal', function () {
 // 执行一些动作...
 var inputElements = this.getElementsByTagName("input");
 var userArr = [];
 for(var i=0;i"
   + datas[i].code +""
   + datas[i].userName +""
   + datas[i].sex +""
   + datas[i].passWord +""
   + datas[i].age +""
   + datas[i].birthday +"" 
   +"";

  flag = !flag;//颜色转换
 }
 tbodyElement.innerHTML = html;
 }
 
 function refreshDatas(datas){
 addRowData(datas);
 };

 
 function collectionRowData(param){
 var tdElement = param.getElementsByTagName("td");
 var userArr = [];
 for(var i=1;i

效果图：

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。