目的：
此案例使用jquery实现对用户信息的增删改查操作，主要用来熟悉一下jquery对象的方法。
步骤：
首先，创建一个静态的用户表单，用来显示提交的数据，如下图所示：
可以看出添加了六个属性，分别为Merchart Name、Merchart Code、Total Number、Start Time、end Time、以及state，此外具有增加信息，搜索，全选，批量删除、删除和编辑操作，亲们，也可根据自己的需求自行添加，页面布局完整代码如下：（复制即可使用）
注意：其中页面布局是依赖于bootstarp框架的，在使用时注意改变引用路径。
<!DOCTYPE html>
<html>
<head>
<title>用户信息管理</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="assert/bootstrap.min.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="add">
增加用户信息
</button>
<!-- 模态框1 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">Add Reward info</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<form>
<div class="form-group">
<label for="email">Merchart Name</label>
<input type="text" class="form-control" id="username" placeholder="please into Merchart Name">
<div class="error_box"></div>
</div>
<div class="form-group">
<label for="code">Merchart Code</label>
<input type="text" class="form-control" id="code" placeholder="please into Merchart Code">
<div class="error_box"></div>
</div>
<div class="form-group">
<label for="Number">Total Number</label>
<input type="text" class="form-control" id="number" placeholder="please into Total Number">
<div class="error_box"></div>
</div>
<div class="form-group">
<label for="State">Start Time</label>
<input type="text" class="form-control" id="start" placeholder="please into Start Time">
<div class="error_box"></div>
</div>
<div class="form-group">
<label for="end">end Time</label>
<input type="text" class="form-control" id="end" placeholder="please into End Time">
<div class="error_box"></div>
</div>
<div class="form-group">
<label for="state">state</label>
<input type="text" class="form-control" id="state" placeholder="please into state">
<div class="error_box"></div>
</div>
</form>
</div>
<!-- 模态框底部 -->
<button type="submit" class="btn btn-primary" id='addbtn'>ADD</button>
<button type="submit" class="btn btn-primary" id="cancle">Cancle</button>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
<!-- 模态框结束 -->
<!-- 搜索框 -->
<input type="text" class="form-control" id="search" placeholder="Please enter the Merchart Name you want to query ">
<button type="button" class="btn btn-primary"id="querybtn">搜索</button>
<!-- 主题部分 -->
<table class="table table-striped">
<thead>
<tr>
<th>
<label>全选</label>
<input type="checkbox" name="item" onclick="checkall(this);">
</th>
<th class="padding-right-xs padding-bottom-xs" >Merchart Name</th>
<th class="padding-right-xs padding-bottom-xs" >Merchart Code</th>
<th class="padding-right-xs padding-bottom-xs" >Total Number</th>
<th>start time</th>
<th>end time</th>
<th>state</th>
<th>option</th>
</tr>
</thead>
<tbody id="tab">
<button class="btn btn-primary" id="ALLdel" onclick="delRow()">批量删除</button>
<tr>
<td><input type="checkbox" name="item"/></td>
<td class="padding-right-xs padding-top-xxs username">hanna</td>
<td class="padding-right-xs padding-top-xxs">1234567</td>
<td class="padding-right-xs padding-top-xxs">25</td>
<td>2019/01/06</td>
<td>2019/06/15</td>
<td>expried</td>
<td>
<button type="button" class="btn btn-default btn-danger del" onclick="del(this);";>删除</button>
<button type="button" class="btn btn-default btn-warning edit"data-toggle="modal" data-target="#myEdit" onclick="edit(this);">编辑</button></td>
</tr>
<tr>
<td><input type="checkbox" name="item"/></td>
<td class="padding-right-xs padding-top-xxs username">hanna</td>
<td class="padding-right-xs padding-top-xxs">1234567</td>
<td class="padding-right-xs padding-top-xxs">25</td>
<td>2019/01/06</td>
<td>2019/06/15</td>
<td>expried</td>
<td>
<button type="button" class="btn btn-default btn-danger del" onclick="del(this);";>删除</button>
<button type="button" class="btn btn-default btn-warning edit"data-toggle="modal" data-target="#myEdit" onclick="edit(this);">编辑</button></td>
</tr>
<tr>
<td><input type="checkbox" name="item"/></td>
<td class="padding-right-xs padding-top-xxs username">ivy</td>
<td class="padding-right-xs padding-top-xxs">1234567</td>
<td class="padding-right-xs padding-top-xxs">23</td>
<td>2019/01/08</td>
<td>2019/06/14</td>
<td>expried</td>
<td>
<button type="button" class="btn btn-default btn-danger del" onclick="del(this);">删除</button>
<button type="button" class="btn btn-default btn-warning edit"data-toggle="modal" data-target="#myEdit" onclick="edit(this);">编辑</button></td>
</tr>
<tr>
<td><input type="checkbox" name="item"/></td>
<td class="padding-right-xs padding-top-xxs username">jack</td>
<td class="padding-right-xs padding-top-xxs">6543210</td>
<td class="padding-right-xs padding-top-xxs">29</td>
<td>2019/01/06</td>
<td>2019/06/19</td>
<td>current</td>
<td>
<button type="button" class="btn btn-default btn-danger del" onclick="del(this);">删除</button>
<button type="button" class="btn btn-default btn-warning edit"data-toggle="modal" data-target="#myEdit" onclick="edit(this);">编辑</button></td>
</tr>
<tr>
<td><input type="checkbox" name="item"/></td>
<td class="padding-right-xs padding-top-xxs username">joe</td>
<td class="padding-right-xs padding-top-xxs">5648527</td>
<td class="padding-right-xs padding-top-xxs">18</td>
<td>2019/01/05</td>
<td>2019/06/18</td>
<td>expried</td>
<td>
<button type="button" class="btn btn-default btn-danger del" onclick="del(this);" >删除</button>
<button type="button" class="btn btn-default btn-warning edit"data-toggle="modal" data-target="#myEdit" onclick="edit(this);">编辑</button></td>
</tr>
<tr>
<td><input type="checkbox" name="item"/></td>
<td class="padding-right-xs padding-top-xxs username">jack</td>
<td class="padding-right-xs padding-top-xxs">6543210</td>
<td class="padding-right-xs padding-top-xxs">29</td>
<td>2019/01/06</td>
<td>2019/06/19</td>
<td>current</td>
<td>
<button type="button" class="btn btn-default btn-danger del" onclick="del(this);">删除</button>
<button type="button" class="btn btn-default btn-warning edit"data-toggle="modal" data-target="#myEdit" onclick="edit(this);">编辑</button></td>
</tr>
</tbody>
</table>
</div>
<!-- 模态框2 -->
<div class="modal fade" id="myEdit">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">Edit Reward info</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<form>
<div class="form-group">
<label for="email">Merchart Name</label>
<input type="text" class="form-control" id="change1" placeholder="please into Merchart Name">
</div>
<div class="form-group">
<label for="code">Merchart Code</label>
<input type="text" class="form-control" id="change2" placeholder="please into Merchart Code">
</div>
<div class="form-group">
<label for="Number">Total Number</label>
<input type="text" class="form-control" id="change3" placeholder="please into Total Number">
</div>
<div class="form-group">
<label for="State"
>State Time</label>
<input type="text" class="form-control" id="change4" placeholder="please into State Time">
</div>
<div class="form-group">
<label for="end">end Time</label>
<input type="text" class="form-control" id="change5" placeholder="please into End Time">
</div>
<div class="form-group">
<label for="state">state</label>
<input type="text" class="form-control" id="change6" placeholder="please into state">
</div>
</form>
<button type="submit" class="btn btn-primary" id="edited">Edited</button>
<button type="submit" class="btn btn-primary" id='edit-cancle'>Cancle</button>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
<!-- 模态框2 end -->
<script src="assert/jquery-3.4.1.min.js"></script>
<script src="assert/bootstrap.min.js"></script>
<script type="text/javascript" src="user.js"></script>
</body>
</html>
由于页面中使用了bootstarp框架中的模态框，所以当点击添加和编辑按钮时，会弹出以下的效果图：
基本的页面布局就这样，下面就可以书写js脚本了。
1.实现添加数据：
思路：首先获取添加页面的每个表单的input的值，然后动态的创建tr，td并将其添加到table中即可，同时添加数据验证，当鼠标离开input框时对数据进行非空校验，数据为空时错误信息显示并且input边框变为红色，不为空时不显示错误信息，input框颜色正常。比较简单，代码实现如下：
// 获取dom元素
var username =$('#username');
var code=$("#code");
var number=$("#number");
var start=$('#start')
var end=$("#end");
var state=$("#state");
var tab=$("#tab");
var add =$("#add");
//新增--------------------------------------------------
var addbtn =document.getElementById("addbtn");
isError1 = false;
isError2 = false;
isError3 = false;
isError4 = false;
isError5 = false;
isError6 = false;
add.on("click",function(){
username.focus();
})
// 表单验证
username.on("blur",function(){
if (username.val().length==0){
error[0].innerHTML = "Merchart Name cannot be empty ";
username.css("borderColor","red");
return;
}else{
error[0].innerHTML = "";
username.css("borderColor","#ccc");
isError1 = true;
}
});
code.on("blur",function(){
if (code.val().length==0){
error[1].innerHTML = "MerchartCode cannot be empty ";
code.css("borderColor","red");
return;
}else{
error[1].innerHTML = "";
code.css("borderColor","#ccc");
isError2 = true;
}
});
number.on("blur",function(){
if (number.val().length==0){
error[2].innerHTML = "TotalNumber cannot be empty ";
number.css("borderColor","red");
return;
}else{
error[2].innerHTML = "";
number.css("borderColor","#ccc");
isError3 = true;
}
});
start.on("blur",function(){
if (start.val().length==0){
error[3].innerHTML = "StartTime cannot be empty ";
start.css("borderColor","red");
return;
}else{
error[3].innerHTML = "";
start.css("borderColor","#ccc");
isError4 = true;
}
});
end.on("blur",function(){
if (end.val().length==0){
error[4].innerHTML = "endTime cannot be empty ";
end.css("borderColor","red")
return;
}else{
error[4].innerHTML = "";
end.css("borderColor","#ccc");
isError5 = true;
}
});
state.on("blur",function(){
if (state.val().length==0){
error[5].innerHTML = "state cannot be empty ";
state.css("borderColor","red")
return;
}else{
error[5].innerHTML = "";
state.css("borderColor","#ccc");
isError6 = true;
}
});
$(document).on('click',"#addbtn",function(){
if(isError1&&isError2&&isError3&&isError4&&isError5&&isError6){
//setAttribute：修改节点属性
//新增框架
var tr1 =document.createElement("tr");
//赋值内容给tr
tr1.innerHTML="<td><input type='checkbox' name='item'></td><td class='padding-right-xs padding-top-xxs username'>"+username.val()+"</td><td class='padding-right-xs padding-top-xxs'>"+code.val()+"</td><td class='padding-right-xs padding-top-xxs'>"+number.val()+"</td><td>"+start.val()+"</td><td>"+end.val()+"</td><td>"+state.val()+"</td><td><button type='button' class='btn btn-default btn-danger' onclick='del(this);' >删除</button><button type='button' class='btn btn-default btn-warning edit' data-toggle='modal' data-target='#myEdit' onclick='edit(this);'>编辑</button></td>"
tab.append(tr1);
alert("恭喜添加成功");
resets();
//取消-----------------------------------------------
document.getElementById('cancle').onclick=function(){
resets();
}
};
});
其中resets（）函数的作用是清空文本框的内容，当添加完成以及用户点击了取消按钮时，均触发此函数，因为多次使用封装成函数，具体代码如下：
//取消封装的函数
function resets(){
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=='text'){
inputs[i].value="";
}else if(inputs[i].type=='password'){
inputs[i].value="";
}else if(inputs[i].type=='checkbox'){
if(inputs[i].checked){
inputs[i].checked=false;
}
}else if(inputs[i].type=='radio'){
if(inputs[i].checked){
inputs[i].checked=false;
}
}
}
}
2.实现编辑功能
思路：首先获取编辑表单的jquery元素，由于在动态添加表格时，添加了οnclick='edit(this)函数，此时只需要通过this找到需要编辑的行，在通过行查找对应的td，将对应的td的值赋值给表单中对应的值即可，具体代码如下：（此时并未添加数据校验，亲可以根据自己的需求添加）
//获取编辑表单的jquery元素
var change1 =$("#change1");
var change2 =$("#change2");
var change3 =$("#change3");
var change4 =$("#change4");
var change5 =$("#change5");
var change6 =$("#change6");
var parentTr;
var modify;
edit=function(obj){
var parentTr=obj.parentNode.parentNode;
var modity_tr=parentTr.getElementsByTagName("td");
change1.val(modity_tr[1].innerText);
change2.val(modity_tr[2].innerText);
change3.val(modity_tr[3].innerText);
change4.val(modity_tr[4].innerText);
change5.val(modity_tr[5].innerText);
change6.val(modity_tr[6].innerText);
//编辑完成
$("#edited").on('click',function(){
var modity_tr=parentTr.getElementsByTagName("td");
modity_tr[1].innerText=change1.val();
modity_tr[2].innerText=change2.val();
modity_tr[3].innerText=change3.val();
modity_tr[4].innerText=change4.val();
modity_tr[5].innerText=change5.val();
modity_tr[6].innerText=change6.val();
alert("恭喜修改成功");
});
//取消
$("#edit-cancle").on("click",function(){
resets();
})
}
3.实现查询
思路：首先当搜索的文本框改变时，获取文本框的值，当点击搜索按钮时，先删除所有的行，然后获取所有的username，利用indexOf（）方法查找其中包含搜索关键字的行重新添加到table中。具体实现代码：
var search=$("#search");
var querybtn=$("#querybtn");
var cha =$(".username");
var query;
search.on("change",function(){
query=search.val();
})
querybtn.on("click",function(){
var tr =document.querySelectorAll("tr");
//删除所有行
for(var k=1;k<tr.length;k++){
tr[k].remove()
}
console.log(cha);
for(var j=0;j<cha.length;j++){
if(cha[j].innerText.indexOf(query)>=0){
var str=cha[j].parentNode;
}
tab.append(str);
};
});
});
4.实现删除以及批量删除
思路：删除：由于动态生成时，添加了οnclick='del(this)函数，只需要找到要删除的数据所在的行，将其使用remove()方法删除即可，批量删除：首先获取父选框的选中状态，获取每个子复选框，如果子复选框被选中状态，取消其选中状态，最后使每个子复选框的状态与父复选框一致，最后判断获取选中的子复选框，找到其tr，在table中将其删除。具体代码如下
//删除该行
del=function(obj){
var parentTr=obj.parentNode.parentNode;
var bool =confirm("小主，确定要删除这行吗?");
if(bool){
parentTr.remove() //删除一行
};
};
//全选
checkall=function (obj){
var checked=obj.checked;
var item=document.getElementsByName("item");
for(var i=0;i<item.length;i++){
if(item[i].checked){
item[i].checked=null;
}else{
item[i].checked=checked;
}
item[i].checked=checked;
}
}
//删除选中
delRow=function(){
var items=document.getElementsByName("item");
for(var i=1;i<items.length;i++){
if(items[i].checked){
var parentNode=items[i].parentNode.parentNode;
var tables=parentNode.parentNode;
tables.removeChild(parentNode);
i--;
}
}
}
1605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
