jQuery實(shí)現(xiàn)增刪改查
更新時(shí)間：2020年12月22日 10:46:16 作者：Uncle_sixsix
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)增刪改查的具體代碼，供大家參考，具體內(nèi)容如下
- jquery用的是1.11版本
- css就用bootstrap吧
- 因?yàn)樵龊透挠昧四B(tài)框修改，所以還用了bootstrap.js實(shí)現(xiàn)模態(tài)框的彈出和關(guān)閉
做了個(gè)簡(jiǎn)單的表格來(lái)實(shí)現(xiàn)功能
HTML代碼段
//表格
<div class="container" style="padding-top: 40px;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control swich" />
</div>
<div class="col-md-3">
<button class="btn btn-danger sreach">搜索</button>
<button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
</div>
</div>
</div>
<table class="table table-bordered text-center">
<tr>
<td>編號(hào)</td>
<td>姓名</td>
<td>成績(jī)</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>張三</td>
<td>89</td>
<td>
<button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
<button class="btn btn-danger del">刪除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>91</td>
<td>
<button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
<button class="btn btn-danger del">刪除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>劉一</td>
<td>80</td>
<td>
<button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
<button class="btn btn-danger del">刪除</button>
</td>
</tr>
</table>
</div>
//修改的模態(tài)框
<div class="modal fade" id="myModal" 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" id="myModalLabel">修改信息</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="text" placeholder="編號(hào)" id="reusrnum" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder="名字" id="reusrname" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder="成績(jī)" class="form-control" id="rescore" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
//增加的模態(tài)框
<div class="modal fade" id="myModel" 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" id="myModalLabel">增加信息</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="text" placeholder="編號(hào)" id="reusrnum" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder="名字" id="reusrname" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder="成績(jī)" class="form-control" id="rescore" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
Jquery代碼段
<script>
//刪除的功能
$(document).on("click", ".del", function() {
$(this).parents("tr").remove()
})
//改的功能
var _this = null
$(document).on("click", ".rev", function() {
var _arr = []
_this = $(this).parents("tr")
$(this).parents("tr").find("td:not(:last)").each(function(){
_arr.push($(this).text())
})
$("#myModal").find("input").each(function(i){
$(this).val(_arr[i])
})
})
$(document).on("click",".olk", function(){
var _arr = []
$("#myModal").find("input").each(function(){
_arr.push($(this).val())
})
_this.find("td:not(:last)").each(function(i){
$(this).text(_arr[i])
})
})
//增加的功能
$(document).on("click",".aad",function(){
var _arr = []
var str = ""
$("#myModel").find("input").each(function(){
_arr.push($(this).val())
})
str = '<tr><td>'+_arr[0]+'</td><td>'+_arr[1]+'</td><td>'+_arr[2]+'</td><td><button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">刪除</button></td></tr>'
$(".table").append(str)
})
//查的功能
$(".sreach").click(function(){
var oS = $(".swich").val()
if(oS.length==0){
alert("請(qǐng)輸入點(diǎn)東西")
}else if($("table tr td:contains('"+oS+"')").length==0){
alert("找不到數(shù)據(jù)")
}else{
$(".table tr:not(:first)").hide()
$(".table tr:contains('"+oS+"')").show().find("input").prop("checked",true)
}
})
</script>
ps:新人，class的命名有點(diǎn)不規(guī)范...將就看著吧
解說(shuō)思路
ps:要記得對(duì)象緩存 _this = $(this).null
1.實(shí)現(xiàn)刪的功能
首先準(zhǔn)確地找到當(dāng)前按鈕的父級(jí)元素tr，然后remove()掉就實(shí)現(xiàn)了刪的功能
2.實(shí)現(xiàn)改的功能
這里先做了個(gè)數(shù)組來(lái)存儲(chǔ)已有的信息， 用遍歷的方法each()放進(jìn)數(shù)組，數(shù)組的數(shù)據(jù)再push()進(jìn)模態(tài)框的input框val()可進(jìn)行顯示
點(diǎn)擊模態(tài)框的確認(rèn)按鈕才能實(shí)現(xiàn)更改，所以又要重新將已更改的input框的val()重新遍歷進(jìn)另外的一個(gè)數(shù)組進(jìn)行存儲(chǔ)，再push()進(jìn)表格就實(shí)現(xiàn)更改的更改了
3.實(shí)現(xiàn)增的功能
增加的功能也用了模態(tài)框來(lái)采集數(shù)據(jù)，所以也用一個(gè)數(shù)組來(lái)存儲(chǔ)數(shù)據(jù)，將已采集的input框val()遍歷進(jìn)數(shù)組，創(chuàng)建一個(gè)命名為str的dom節(jié)點(diǎn)，用數(shù)組下標(biāo)來(lái)插入要追加的dom節(jié)點(diǎn)，增加的功能就實(shí)現(xiàn)了
4.實(shí)現(xiàn)查的功能
首先要獲取搜索框里val()， 判斷搜索框的長(zhǎng)度是否為0，假如是0就彈出“請(qǐng)輸入點(diǎn)東西”，再用contains()方法判斷搜索框的內(nèi)容在表格里的有沒(méi)有，沒(méi)有就彈出“找不到數(shù)據(jù)”，再或者搜素框的內(nèi)容在表格里有就把除了第一行的數(shù)據(jù)hide()，將表格里有和val()一樣的tr show()出來(lái)
整個(gè)table的增刪改查的功能就實(shí)現(xiàn)啦。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
- jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能示例
- Jquery與Bootstrap實(shí)現(xiàn)后臺(tái)管理頁(yè)面增刪改查功能示例
- jQuery對(duì)table表格進(jìn)行增刪改查
- MVC+jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁(yè)
- 基于jQuery的動(dòng)態(tài)增刪改查表格信息，可左鍵/右鍵提示（原創(chuàng)自Zjmainstay）
相關(guān)文章
jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加與刪除相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-08-08
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯(cuò)誤
今天測(cè)試偶然發(fā)現(xiàn)jquery.bgiframe.js在IE9環(huán)境下提示錯(cuò)誤，于是很是好奇，想辦法知道究竟，于是搜索了一下，現(xiàn)在與大家分享希望可以幫助你們2013-01-01
jqgrid實(shí)現(xiàn)簡(jiǎn)單的單行編輯功能
這篇文章主要介紹了jqgrid實(shí)現(xiàn)簡(jiǎn)單的單行編輯功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
在系統(tǒng)開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)用到系統(tǒng)的當(dāng)前時(shí)間，然而我們遇到的問(wèn)題確又是各個(gè)瀏覽器返回值不同，就像典型的IE和FF瀏覽器。2008-12-12
利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文
這篇文章主要介紹了利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jQuery-onload讓第一次頁(yè)面加載時(shí)圖片是淡入方式顯示
第一次打開(kāi)一個(gè)頁(yè)面時(shí),讓加載好的圖片先隱藏，然后再執(zhí)行動(dòng)畫(huà)fadeIn，這里的load事件：當(dāng)所有子元素已經(jīng)被完全加載完成時(shí)，load事件被發(fā)送到這個(gè)元素2012-05-05
使用jQuery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax
以往我們?cè)谧鯽jax時(shí),都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個(gè)請(qǐng)求都要建一個(gè)這樣的文件，非常麻煩，下面我們甩掉ashx和asmx來(lái)使用jQuery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax，需要的朋友參考下2016-08-08
舉例講解jQuery中可見(jiàn)性過(guò)濾選擇器的使用
這篇文章主要介紹了jQuery中可見(jiàn)性過(guò)濾選擇器的使用,文中分為不可見(jiàn)性選擇器和可見(jiàn)性選擇器來(lái)分別舉例講解,需要的朋友可以參考下2016-04-04
z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(基于jquery)
這篇文章主要介紹了z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(jquery),需要的朋友可以參考下2015-11-11
jquery ajax傳遞中文參數(shù)亂碼問(wèn)題及解決方法說(shuō)明
本篇文章主要是對(duì)jquery ajax傳遞中文參數(shù)亂碼問(wèn)題及解決方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02