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

提出问题：如何利用原生的js实现基本的增删改查功能？？？
解决问题
假如你已经对JS有一定基础
假如你对bootstrap有一定基础
下面是具体的例子，
包含两个文件（index.jsp 和 index.js）
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <！-- Bootstrap --> <link href="resource/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="resource/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <title>JS框架学习</title> </head> <body onload="loadUserDatas（）"> <div class="container"> <table class="table" id="table"><caption><h2>练习一</h2></caption><caption><button type="button" class="btn btn-info" id="user_add" data-toggle="modal" data-target="#myModal" onclick="optionUserData（this）;">新增</button><button type="button" class="btn btn-info" id="user_delete" onclick="optionUserData（this）;">删除</button><button type="button" class="btn btn-info" id="user_edit" data-toggle="modal" data-target="#myModal" onclick="optionUserData（this）;">编辑</button><button type="button" class="btn btn-info" id="user_find" onclick="optionUserData（this）;">查询</button><input type="text" id="s_code" placeholder="按工号查询" style="width: 80px;"><input type="text" id="s_userName" placeholder="按姓名查询" style="width: 80px;"><input type="text" id="s_all" placeholder="全文搜索" style="width: 80px;"></caption><thead> <tr><th>序号</th><th>工号</th><th>姓名</th><th>性别</th><th>密码</th><th>年龄</th><th>出生日期</th> </tr></thead><tbody id="tbody"></tbody> </table> <！-- 模态框（Modal） --> <div class="modal hide" id="myModal" role="dialog" ><div class="modal-dialog"> <div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"> ×</button><h4 class="modal-title" id="myModalLabel">新增用户</h4></div><div class="modal-body" id="modal-body"><label for="name">工号:</label> <input type="text" class="form-control" id="m_code" placeholder="请输入工号"> <label for="name">姓名:</label> <input type="text" class="form-control" id="m_userName" placeholder="请输入姓名"> <label for="name">性别:</label> <input type="text" class="form-control" id="m_sex" placeholder="请输入性别"> <label for="name">密码:</label> <input type="text" class="form-control" id="m_passWord" placeholder="请输入密码"> <label for="name">年龄:</label> <input type="text" class="form-control" id="m_age" placeholder="请输入年龄"> <label for="name">出生日期:</label> <input type="text" class="form-control" id="m_birthday" placeholder="请输入出生日期"></div><div class="modal-footer"><button type="button" class="btn btn-default"data-dismiss="modal">保存</button><button type="button" class="btn btn-primary">提交更改</button></div> </div><！-- /.modal-content --> </div><！-- /.modal --> </div> <！-- 这里需要引入相关的js，很重要，请记住 --> <script type="text/javascript" src="resource/jquery/jquery.js"></script> <script type="text/javascript" src="resource/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="index.js"></script> </body> </html> 复制代码 复制代码 //存放所有用户 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<inputElements.length;i++）{ userArr[i] = inputElements[i].value;}var user = New（User,userArr）;//添加操作if（operateType == "add"）{ user.addUserData（）; refreshDatas（users）;//编辑操作}else if（operateType == "edit"）{ user.editUserData（）; refreshDatas（users）;} }）; /*** 首次加载页面执行方法*/ function loadUserDatas（）{var userArray = initUserDatas（）;addRowData（userArray）;refreshDatas（users）; } /*** 初始化用户数据*/ function initUserDatas（）{var initUser1 = New（User,["1001","小兰","女","1234","13","1991-1-1"]）;var initUser2 = New（User,["1002","小毅","男","1234","13","1991-1-1"]）;var initUser3 = New（User,["1003","兰花","女","1234","13","1991-1-1"]）;var initUser4 = New（User,["1004","兰儿","女","1234","13","1991-1-1"]）;users[initUser1.code] = initUser1;users[initUser2.code] = initUser2;users[initUser3.code] = initUser3;users[initUser4.code] = initUser4;return users; } /*** 往表格添加一行html数据*/ function addRowData（datas）{var tbodyElement = document.getElementById（"tbody"）;var html = "";var color = "warning";var flag = true;for（var i in datas）{ if（flag）{color = "info"; }else{color = "warning"; } html = html + "<tr class=""+ color +""><td style="width:30px;"><input type="checkbox"></td><td id="code">" + datas[i].code +"</td><td id="userName">" + datas[i].userName +"</td><td id="sex">" + datas[i].sex +"</td><td id="passWord">" + datas[i].passWord +"</td><td id="age">" + datas[i].age +"</td><td id="birthday">" + datas[i].birthday +"</td>"+"</tr>"; 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<tdElement.length;i++）{ var temp = tdElement[i].textContent; userArr[i-1] = temp;}var user = New（User,userArr）;return user; } /*** 用户操作方法*/ function optionUserData（param）{//获得操作类别var optionType = param.getAttribute（"id"）;if（optionType == "user_add"）{ operateType = "add";}else if（optionType == "user_delete"）{ var checkRowData = isCheckedData（）; var user = collectionRowData（checkRowData）; user.deleteUserData（）; refreshDatas（users）;}else if（optionType == "user_edit"）{ operateType = "edit"; var checkRowData = isCheckedData（）; var user = collectionRowData（checkRowData）; var modal_body = document.getElementById（"modal-body"）; var inputElements= modal_body.getElementsByTagName（"input"）; for（var i=0;i<inputElements.length;i++）{var temp = inputElements[i].id.substring（2,inputElements[i].id.length）inputElements[i].value = user[temp]; }}else if（optionType == "user_find"）{ var s_code = document.getElementById（"s_code"）.value; var s_userName = document.getElementById（"s_userName"）.value; var s_all= document.getElementById（"s_all"）.value; //搜索数据 var s_data = s_data || {}; s_data.code = s_code; s_data.userName = s_userName; s_data.all = s_all; var user = New（User,[]）; user.findUserData（s_data）;}else{} } /*** 是否选中数据,返回选中数据的行*/ function isCheckedData（）{var tbodyElement =document.getElementById（"tbody"）;var trElements = tbodyElement.getElementsByTagName（"tr"）;var flag = false;for（var i=0;i<trElements.length;i++）{ var inputElement = trElements[i].getElementsByTagName（"input"）[0]; if（inputElement.checked）{flag = true;return trElements[i]; }}if（！flag）{ alert（"请选择一条记录！"）; $（"#myModal"）.unbind（"on"）;} }
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。