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

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。
                

					
上一篇：41个Web开发者必须收藏的JavaScript实用技巧
下一篇：使用do...while的方法输入一个月中所有的周日(实例代码)