Jquery+Bootsrap純前臺 表格增刪改查操作
阿新 • • 發佈:2018-11-21
介面: bootstrap
JavaScript框架 :Jquery
練習: 節點操作。
效果圖:
原始碼:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Jquery 增刪改查</title>
- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <table class="table table-striped table-bordered">
- <caption>Jquery表格增刪改查</caption>
- <thead>
- <tr>
- <th>
- <input type="checkbox" id="checkAll">
- </th>
- <th>序號</th>
- <th>姓名</th>
- <th>年齡</th>
- <th>班級</th>
- </tr>
- </thead>
- <tbody id="myTb">
- <tr>
- <td>
- <input type="checkbox" class="subCheck">
- </td>
- <td>1</td>
- <td>張三</td>
- <td>18</td>
- <td>一班</td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" class="subCheck">
- </td>
- <td>2</td>
- <td>李四</td>
- <td>19</td>
- <td>二班</td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" class="subCheck">
- </td>
- <td>3</td>
- <td>王五</td>
- <td>22</td>
- <td>四班</td>
- </tr>
- </tbody>
- </table>
- <div class="btnGroups">
- <button id="addBtn" class="btn btn-primary">
- <span class="glyphicon glyphicon-plus"></span>
- 新增</button>
- <button id="editBtn" class="btn btn-warning">
- <span class="glyphicon glyphicon-edit"></span>
- 修改</button>
- <button id="delBtn" class="btn btn-danger">
- <span class="glyphicon glyphicon-trash"></span>
- 刪除</button>
- </div>
- </div>
- </div>
- <!-- 新增&&修改的模態框 -->
- <div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <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">編輯學生資訊</h4>
- </div>
- <div class="modal-body">
- <form class="form-horizontal" id="myForm" role="form">
- <div class="form-group">
- <label for="name" class="col-sm-2 control-label">姓名</label>
- <div class="col-sm-10">
- <input type="text" class="form-control" id="name" placeholder="請輸入學生姓名">
- </div>
- </div>
- <div class="form-group">
- <label for="age" class="col-sm-2 control-label">年齡</label>
- <div class="col-sm-10">
- <input type="number" class="form-control" id="age" placeholder="請輸入學生年齡">
- </div>
- </div>
- <div class="form-group">
- <label for="classname" class="col-sm-2 control-label">班級</label>
- <div class="col-sm-10">
- <select class="form-control" id="classname">
- <option disabled selected value="">請選擇班級</option>
- <option value="一班">一班</option>
- <option value="二班">二班</option>
- <option value="三班">三班</option>
- <option value="四班">四班</option>
- </select>
- </div>
- </div>
- <input type="hidden" id="hiddenInput" vv="">
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
- <button type="button" id="saveBtn" class="btn btn-primary">提交</button>
- </div>
- </div>
- <!-- /.modal-content -->
- </div>
- <!-- /.modal -->
- </div>
- <script>
- $(function () {
- function formReset() {
- // 重置表單
- $('#myForm')[0].reset();
- }
- // 新增按鈕點選
- $('#addBtn').click(function () {
- formReset();
- // 新增之前 清空vv
- $('#hiddenInput').prop("vv","");
- $('#myModal').modal('show');
- })
- // 修改按鈕點選
- $('#editBtn').click(function () {
- var selectIndex;
- var selectCount=0;
- $('.subCheck').each(function(i,j){
- if(j.checked==true){
- selectCount++;
- selectIndex=i;
- }
- })
- if(selectCount!==1){
- alert("請選擇一條資料進行修改")
- }else{
- // 拿到選中tr的值
- var mytr=$("#myTb tr:eq("+selectIndex+")");
- $('#name').val(mytr.find("td:eq(2)").text());
- $('#age').val(mytr.find("td:eq(3)").text());
- $('#classname').val(mytr.find("td:eq(4)").text());
- // 為隱藏的input vv 屬性賦值,附上當前選中table行的索引
- $('#hiddenInput').prop("vv",selectIndex);
- $('#myModal').modal('show');
- }
- })
- // 提交按鈕點選
- $('#saveBtn').click(function () {
- var name=$('#name').val();
- var age=$('#age').val();
- var classname=$('#classname').val();
- if(name==""||age==""||classname==""||classname==null){
- alert("請檢查是否有未填項!");
- }else{
- var vvValue= $('#hiddenInput').prop("vv");
- if(vvValue==""||vvValue==undefined||vvValue==null){
- var name = $('#name').val();
- var age = $('#age').val();
- var classname = $('#classname').val();
- // 序號
- var index = $('.subCheck').length + 1;
- // 向table中插入資料
- var trString = `<tr> <td>
- <input type="checkbox" class="subCheck">
- </td>
- <td>${index}</td>
- <td>${name}</td>
- <td>${age}</td>
- <td>${classname}</td></tr>`;
- $('#myTb').append(trString);
- $('#myModal').modal('hide');
- }else{
- // 拿到當前要修改的tr
- var selectTr= $("#myTb tr:eq("+vvValue+")");
- // 修改資料
- selectTr.find("td:eq(2)").text($('#name').val());
- selectTr.find("td:eq(3)").text($('#age').val());
- selectTr.find("td:eq(4)").text($('#classname').val());
- $('#myModal').modal('hide');
- }
- }
- })
- //全選 反選
- $('#checkAll').click(function () {
- $('.subCheck').prop("checked", $('#checkAll').prop("checked"));
- })
- // 刪除
- $('#delBtn').click(function(){
- var delArr=[];
- $('.subCheck').each(function(i,obj){
- if(obj.checked==true){
- delArr.push(i);
- }
- })
- if(delArr.length<1){
- alert("請至少選擇一條刪除資料!");
- }else{
- delArr.forEach(function(obj,i){
- var j=delArr[i]-i;
- $('#myTb tr:eq('+j+')').remove();
- })
- }
- })
- })
- </script>
- </body>
- </html>