jQuery realizes addition deletion and modification
- 2021-10-15 09:30:50
- OfStack
In this paper, we share the specific codes of jQuery for your reference. The specific contents are as follows
jquery uses version 1.11 Use bootstrap for css Because the modal box is modified by adding sum, bootstrap. js is also used to eject and close the modal boxMade a simple table to realize the function
HTML code snippet
// Forms
<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"> Search </button>
<button class="btn btn-default add" data-toggle="modal" data-target="#myModel"> Increase </button>
</div>
</div>
</div>
<table class="table table-bordered text-center">
<tr>
<td> Numbering </td>
<td> Name </td>
<td> Achievement </td>
<td> Operation </td>
</tr>
<tr>
<td>1</td>
<td> Zhang 3</td>
<td>89</td>
<td>
<button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal"> Modify </button>
<button class="btn btn-danger del"> Delete </button>
</td>
</tr>
<tr>
<td>2</td>
<td> Li 4</td>
<td>91</td>
<td>
<button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal"> Modify </button>
<button class="btn btn-danger del"> Delete </button>
</td>
</tr>
<tr>
<td>3</td>
<td> Liu 1</td>
<td>80</td>
<td>
<button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal"> Modify </button>
<button class="btn btn-danger del"> Delete </button>
</td>
</tr>
</table>
</div>
// Modified modal box
<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"> Modify information </h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="text" placeholder=" Numbering " id="reusrnum" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder=" Name " id="reusrname" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder=" Achievement " class="form-control" id="rescore" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Shut down </button>
<button type="button" class="btn btn-primary olk" data-dismiss="modal"> Commit changes </button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
// Added modal box
<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"> Add information </h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="text" placeholder=" Numbering " id="reusrnum" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder=" Name " id="reusrname" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder=" Achievement " class="form-control" id="rescore" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Shut down </button>
<button type="button" class="btn btn-primary aad" data-dismiss="modal"> Add information </button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
Jquery code snippet
<script>
// Deleted functionality
$(document).on("click", ".del", function() {
$(this).parents("tr").remove()
})
// Function of change
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])
})
})
// Added functions
$(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"> Modify </button> <button class="btn btn-danger del"> Delete </button></td></tr>'
$(".table").append(str)
})
// Function of checking
$(".sreach").click(function(){
var oS = $(".swich").val()
if(oS.length==0){
alert(" Please enter something ")
}else if($("table tr td:contains('"+oS+"')").length==0){
alert(" Data not found ")
}else{
$(".table tr:not(:first)").hide()
$(".table tr:contains('"+oS+"')").show().find("input").prop("checked",true)
}
})
</script>
ps: Newcomer, the naming of class is a bit irregular... just watch it
Explain the train of thought
ps: Remember the object cache _ this = $(this). null
1. Realize the function of deleting
First, find the parent element tr of the current button accurately, and then drop remove () to realize the deletion function
2. Realize the function of change
Here first do an array to store the existing information, with the traversal method each () into the array, the data of the array push () into the modal box input box val () can be displayed
The change can only be realized by clicking the confirmation button of the modal box, so the changed val () of the input box should be traversed again into another array for storage, and then push () into the table to realize the change
3. Realize the added function
Added function also uses modal frame to collect data, so also use an array to store data, traverse the collected input frame val () into the array, create an dom node named str, insert the dom node to be added with array subscript, and the added function is realized
4. Realize the function of checking
First to obtain the search box val (), determine whether the length of the search box is 0, if it is 0, pop-up "Please input something", then use contains () method to determine whether the content of the search box in the table, no pop-up "no data", or search the content in the table in addition to the first row of data hide (), the table with and val () 1 kind of tr show () out
The function of adding, deleting, modifying and checking the whole table is realized.