界面: 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><!-- /.modal-content --></div><!-- /.modal --></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{// 拿到当前要修改的trvar 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>
