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>
</div>
</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>

Jquery+Bootsrap純前臺表格增刪改查操作

介面: bootstrap JavaScript框架 :Jquery 練習: 節點操作。效果圖: 線上檢視原始碼: <!DOCTYPE

純JS+HTML簡單表格增刪改查

首先這兩天寫的一個簡單增刪改查，基本上靠百度和自學，完成的這個作業。裡面的功能十分的簡陋，對於有需要的朋友一點點幫助吧。這不是一條通往專案的連結：https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密碼：030a 裡面有一

javascript 表格增刪改查排序不會（第一次寫部落格，求交流哈）

學習JS快1個月了，博主本人上的是培訓的，快考試了，補習下學過的發下今晚寫的吧。。。有大神看看我的這種程度，排序事件怎麼弄~~ <!DOCTYPE html><html lang="zh"><head> <

純JavaScript寫一個對錶格的簡單增刪改查操作

功能: 新增表格資料，修改表格資料，刪除表格資料。不完善區: 刪除資料之後序號沒有做處理，表單驗證簡單的提示警告，沒有文字提醒。介面: 線上檢視下面是程式碼:

一個表格教你完成MySQL的增刪改查操作

MySQL簡單的增刪改查簡介: 1.就是一個檔案系統，使用標準sql對資料庫進行操作（crud） 2.資料庫分類:關係型資料庫和非關係型資料庫 a) 常用的關係型資料庫:mysql oracle d

jQuery在web專案中增刪改查的應用

<div id="gps_trackObject_container" class="ui-widget"> <div class="jQGrid_table_wrapper" style="width:97.5%;" > <tabl

bootstrap-table 實現表格增刪改查

bootstrap、bootstrap-table官網：http://bootstrap-table.wenzhixin.net.cn/documentation/ 相關cs js 引用dns地址： http://www.bootcdn.cn/bootstrap/ 下載到

MongoDB增刪改查操作詳解

添加多個負數指定 cal lib 定位也會 pan str 一、插入 MongoDB的插入操作很簡單，使用insert方法，這裏演示從創建數據庫、創建集合到插入文檔、查詢文檔。集合創建方法參數說明： size：集合最大空間 max：集合最多文檔數量（超出si

JqueryEasyUI實現CRUD增刪改查操作

per queryall call .get field string cal upd wid 1.代碼介紹：前端界面由jsp,JqueryEasyUI制作，後臺代碼由Servlet實現邏輯操作註：JqueryEasyUI的庫文件和其他自己jar包自己導入。Jquery

（六）Hibernate的增刪改查操作（2）

rac result jlist static 面向原生 comm public set 一、在Hibernate中使用原生SQL語句 sql語句面向的是數據庫，所以sql語句中對應的不再是bean了，比如sql="select * from user" 在hql中

Scala對MongoDB的增刪改查操作

自動 back localhost sts hive comm dbo 用戶 hashmap =========================================== 　　　　原文鏈接： Scala對MongoDB的增刪改查操作轉載請註明出處！ ======

使用logging模塊實現對文件增刪改查操作的紀錄（low B版）

文件 time *** tle () handle 函數賦值增刪改查操作 info #!/usr/bin/env python#對之前文件進行的增刪改查操作實現日誌操作，日誌輸出用戶進行過的操作。#!/usr/bin/env pythondef log(): imp

簡單的JDBC的增刪改查操作，附源碼

mysql 小白 http .exe let ext 打印編譯 sdn 1 package com.xyyz.jdbc; 2 3 import java.sql.Connection; 4 import java.sql.DriverManager;

簡單的JDBC的增刪改查操作->抽取了基類，附源碼

exceptio tac catch main trace 工具 nload null user 1.主程序 1 package com.xyyz.jdbc; 2 3 import java.sql.Connection; 4 import java.sql.D

作業員工信息表實現增刪改查操作

nbsp 手機號 add bre mark 作業 ket split 格式不正確有以下員工信息表當然此表你在文件存儲時可以這樣表示 1 1,Alex Li,22,13651054608,IT,2013-04-01 現需要對這個員工

偏於SQL語句的 sqlAlchemy 增刪改查操作

select 比較 esc nec 第一個映射 webp char 定義 ORM 江湖曾幾何時，程序員因為懼怕SQL而在開發的時候小心翼翼的寫著sql，心中總是少不了恐慌，萬一不小心sql語句出錯，搞壞了數據庫怎麽辦？又或者為了獲取一些數據，什麽內外左右連接，函數存

JavaWeb程序利用Servlet的對SQLserver增刪改查操作

tag struct 連接失敗 -1 rop quest map rom stream 聲明:學了幾天終於將增刪改查的操作掌握了，也發現了一些問題，所以總結一下. 重點:操作數據庫主要用的是SQL語句跟其他無關. 一:前提知識:PreparedStatement

通過用戶模型，對數據庫進行增刪改查操作

tab 接受 ssi fig app lte str 程序 ask 增加：db.session.add(user)db.session.commit() 查詢：User.query.filter(User.username == ‘mis1114‘).first() 修改：

通過用戶模型，對數據庫進行增刪改查操作。

lte integer fig 用戶 run __name__ bsp model table from flask import Flask from flask_sqlalchemy import SQLAlchemy import config app = Fla

java連接mysql以及增刪改查操作

while sql mysq stmt values url text tin lose java連接數據庫的代碼基本是固定的，步驟過程覺得繁瑣些，代碼記起來對我來說是鬧挺。直接上代碼：（溫馨提醒：你的項目提前導入連接數據庫的jar包才有的以下操作） 1 clas

Jquery+Bootsrap純前臺 表格增刪改查操作

相關推薦

Jquery+Bootsrap純前臺表格增刪改查操作