Jquery+Bootsrap纯前台表格增删改查操作

界面: 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纯前台 表格增删改查操作

猜你喜欢

Jquery+Bootsrap纯前台表格增删改查操作