简单版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>增删改</title> <script src="jquery.min.js"></script> <script src="bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <style> .addBtn { margin-top: 30px; margin-bottom: 15px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-9 col-md-offset-2"> <button type="button" class="btn btn-primary btn-mg addBtn" data-toggle="modal" data-target="#myModal"> 添加学生的信息 </button> <table class="table table-striped"> <tbody> <tr> <th class="col-md-3">姓名</th> <th class="col-md-3">年龄</th> <th class="col-md-3">性别</th> <th class="col-md-3">操作</th> </tr> <tr> <td>六点</td> <td>23</td> <td>女</td> <td> <button class="btn btn-success editBtn">编辑</button> <button class="btn btn-danger delBtn">删除</button> </td> </tr> <tr> <td>时时彩</td> <td>24</td> <td>女</td> <td> <button class="btn btn-success editBtn">编辑</button> <button class="btn btn-danger delBtn">删除</button> </td> </tr> <tr> <td>刚强</td> <td>13</td> <td>男</td> <td> <button class="btn btn-success editBtn">编辑</button> <button class="btn btn-danger delBtn">删除</button> </td> </tr> </tbody> </table> </div> </div> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="username">姓名</label> <input type="text" class="form-control item" id="username" placeholder="username"> </div> <div class="form-group"> <label for="age">年龄</label> <input type="text" class="form-control item" id="age" placeholder="age"> </div> <div class="form-group"> <label for="gender">性别</label> <input type="text" class="form-control item" id="gender" placeholder="gender"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary queding">确定</button> </div> </div> </div> </div> <script> //确认信息后 添加信息到列表中 $(".queding").on("click",function () { arr=[]; $(".item").each(function () { var ele_v = $(this).val(); arr.push(ele_v); }); var s ='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td><button class="btn btn-success editBtn">编辑</button><button class="btn btn-danger delBtn">删除</button></td></tr>'; $("tbody").append(s); $("#myModal").modal("hide") }); //删除信息 // 方式一 // $("tbody").on("click",".delBtn",function (e) { //事件委派 // if (e.target.className=='btn btn-danger delBtn'){ // //找到要删除的行 // // console.log(e.target.parentElement.parentElement); // e.target.parentElement.parentElement.remove() // } // }); // 方式二 $("tbody").on("click",".delBtn",function () { //事件委派 $(this).parent().parent().remove() //这里的 }); //编辑信息 $("tbody").on("click",".editBtn",function () { var tds = $(this).parent().prevAll(); tds.each(function () { $(this).html('<input type="text" value='+ $(this).text()+ '>') }); $(this).text("保存"); $(this).removeClass("btn btn-success editBtn"); $(this).addClass("btn btn-info saveBtn") }); //保存信息 $("tbody").on("click",".saveBtn",function () { var tds = $(this).parent().prevAll(); console.log(tds); tds.each(function (){ $(this).text($(this).children().first().val()); console.log() }); $(this).text("编辑"); $(this).removeClass("btn btn-info saveBtn"); $(this).addClass("btn btn-success editBtn"); }); </script> </body> </html>
综合版本
<!DOCTYPE html> <!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ --> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="http://v3.bootcss.com/favicon.ico"> <title>Dashboard Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!--<link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">--> <!-- Custom styles for this template --> <!--<link href="./Dashboard_files/dashboard.css" rel="stylesheet">--> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]> <!--<script src="../../assets/js/ie8-responsive-file-warning.js"></script>--> <!--<script src="Dashboard_files/ie-emulation-modes-warning.js"></script>--> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> //cdn导入css样式 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif] <!--<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">--> <style> .menu { margin: 0 -20px; border-bottom: 1px solid #336699; } .head { padding: 15px; } .my-table-tool { margin-bottom: 15px; } .menu .nav-sidebar > li > a { padding-right: 40px; padding-left: 40px; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Dashboard</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Settings</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Profile</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <!--左侧菜单--> <div class="container-fluid"> <div class="row"> <!--margin-top:50px--> <div class="col-sm-3 col-md-2 sidebar" style="margin-top: 50px"> <div class="menu"> <div class="head bg-primary">菜单一</div> <ul class="nav nav-sidebar"> <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Overview <span class="sr-only">(current)</span></a> </li> <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Reports</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Analytics</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Export</a></li> </ul> </div> <div class="menu"> <div class="head bg-primary">菜单二</div> <ul class="nav nav-sidebar"> <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item again</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">One more nav</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Another nav item</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">More navigation</a></li> </ul> </div> <div class="menu"> <div class="head bg-primary">菜单三</div> <ul class="nav nav-sidebar"> <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item again</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">One more nav</a></li> <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Another nav item</a></li> </ul> </div> </div> </div> </div> <!--表格--> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-2"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-mg addBtn" data-toggle="modal" data-target="#myModal"> 添加学生的信息 </button> <table class="table table-striped"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td class="col-md-2">1</td> <td class="col-md-2">李欣</td> <td class="col-md-2">23</td> <td class="col-md-2">女</td> <td> <button class="btn btn-success editBtn">编辑</button> <button class="btn btn-danger delBtn">删除</button> </td> </tr> <tr> <td>2</td> <td>时时彩</td> <td>24</td> <td>女</td> <td> <button class="btn btn-success editBtn">编辑</button> <button class="btn btn-danger delBtn">删除</button> </td> </tr> <tr> <td>3</td> <td>刚强</td> <td>13</td> <td>男</td> <td> <button class="btn btn-success editBtn">编辑</button> <button class="btn btn-danger delBtn">删除</button> </td> </tr> <tr> <td>4</td> <td>杜康</td> <td>25</td> <td>男</td> <td> <button class="btn btn-success editBtn">编辑</button> <button class="btn btn-danger delBtn">删除</button> </td> </tr> </tbody> </table> </div> </div> </div> <!--模态框--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">学生信息</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="modal-username">姓名</label> <input type="text" class="form-control item" id="modal-username" placeholder="username"> </div> <div class="form-group"> <label for="modal-age">年龄</label> <input type="text" class="form-control item" id="modal-age" placeholder="age"> </div> <div class="form-group"> <label for="modal-gender">性别</label> <input type="text" class="form-control item" id="modal-gender" placeholder="gender"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary queding">确定</button> </div> </div> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <script src="jquery.min.js"></script> <!-- Placed at the end of the document so the pages load faster --> <!--<script src="Dashboard_files/jquery.min.js"></script>--> <!--<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>--> <!--<script src="Dashboard_files/bootstrap.min.js"></script>--> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <!--<script src="Dashboard_files/holder.min.js"></script>--> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!--<script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>--> <script src="bootstrap.js"></script> <script> //左侧菜单 $(".head").on("click", function () { // 兄弟标签 紧挨着的ul标签 隐藏 addClass("hide") $(this).parent().siblings().children("ul").slideUp(); // 把自己 紧挨着的ul标签显示 removeClass("hide") // $(this).next().removeClass("hide"); $(this).next().slideToggle(); }); //删除按钮 $("tbody").on("click","td>.btn-danger",function () { $(this).parent().parent().remove() }); //编辑 $("tbody").on("click",".editBtn",function () {//事件委派 //弹出模态框 //alert(123) $("#myModal").modal("show"); //给模态框赋值 //1、先取值 var tds = $(this).parent().parent().children(); var username = tds.eq(1).text(); var age = tds.eq(2).text(); var danger = tds.eq(3).text(); //2、后赋值 $("#modal-username").val(username); $("#modal-age").val(age); $("#modal-gender").val(danger); //吧tds保存到myModal的data（先把数据保存下来） $("#myModal").data("tds",tds); console.log(tds); // console.log($("#myModal").data("tds")); }); //点击模态框中的确定按钮，增加事件 $(".queding").on("click",function () { //1、隐藏模态框 $("#myModal").modal("hide"); //2、更新td的值0 //取值 var username = $("#modal-username").val(); var age = $("#modal-age").val(); var denger = $("#modal-gender").val(); // 赋值 //拿到你点击的哪一行 var tds = $("#myModal").data("tds"); console.log(tds); if (tds === undefined) { //因为添加和编辑共用一个模态框，所以先分开判断一下 //当tds在模态框中没有值的时候，就实现添加的功能，如果有数据，就做编辑的功能 var tr1 = document.createElement("tr"); //第一个是td的序号 $(tr1).append("<td>" + $("tbody tr").length+1 + "</td>"); console.log($("tbody tr").length); // 第二个是username $(tr1).append('<td>' + username + '</td>'); $(tr1).append('<td>' + age + '</td>'); $(tr1).append('<td>' + denger + '</td>'); // 最后加按钮(找到tbody下的第一行，再从第一行中找到td最后一个td,然后克隆) // var s = $("tbody tr:last").find("td").last(); var ss = s.clone(true); $(tr1).append(ss); $("tbody").append(tr1); } else { console.log(tds); //这里的tds就是上面用data保存下来的每一列里面的内容 tds.eq(1).text(username); tds.eq(2).text(age); tds.eq(3).text(denger); $("#myModal").removeData("tds") } }); //给添加按钮增加事件 $(".addBtn").on("click",function () { //当点击添加按钮的时候把模态框里面的..内容清空 $("#myModal :input").val(""); }); </script> </body> </html>