JS結合bootstrap實現(xiàn)基本的增刪改查功能
來源：易賢網(wǎng) 閱讀：4318 次 日期：2016-07-29 15:25:50
溫馨提示：易賢網(wǎng)小編為您整理了“JS結合bootstrap實現(xiàn)基本的增刪改查功能”,方便廣大網(wǎng)友查閱！

這篇文章主要介紹了JS結合bootstrap實現(xiàn)基本的增刪改查功能,需要的朋友可以參考下

提出問題：如何利用原生的js實現(xiàn)基本的增刪改查功能？？？

解決問題

假如你已經(jīng)對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>

 <!-- 模態(tài)框（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模態(tài)框事件

 $('#myModal').on('hide.bs.modal', function () {

  // 執(zhí)行一些動作...

  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);

  }

 });

 /**

  * 首次加載頁面執(zhí)行方法

  */

 function loadUserDatas(){

  var userArray = initUserDatas();

  addRowData(userArray);

  refreshDatas(users);

 }

 /**

  * 初始化用戶數(shù)據(jù)

  */

 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數(shù)據(jù)

  */

 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;

 }

 /**

  * 刷新用戶數(shù)據(jù)

  */

 function refreshDatas(datas){

  addRowData(datas);

 };

 /**

  * 收集一行數(shù)據(jù)

  */

 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;

   //搜索數(shù)據(jù)

   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{

  }

 }

 /**

  * 是否選中數(shù)據(jù),返回選中數(shù)據(jù)的行

  */

 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");

  }

 }

效果圖：

名單

以上就是本文的全部內容，希望對大家的學習有所幫助

更多信息請查看網(wǎng)絡編程
易賢網(wǎng)手機網(wǎng)站地址：JS結合bootstrap實現(xiàn)基本的增刪改查功能

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證：（云）人服證字（2023）第0102001523號
聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx
咨詢QQ：1093837350（9:00—18:00）版權所有:易賢網(wǎng)