<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>周末作业</title> <style> .cover { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: #616166; opacity: 0.4; z-index: 999; } .model { 600px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000; } .hide { display: none; } </style> </head> <body> <button class="add">add</button> <table border="2"> <thead> <tr> <th>#</th> <th>name</th> <th>hooby</th> <th rowspan="2">operation</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>egon</td> <td>dance</td> <td> <button class="edit">edit</button> <button class="delete">delete</button> </td> </tr> <tr> <td>2</td> <td>yuanju</td> <td>fucksky</td> <td> <button class="edit">edit</button> <button class="delete">delete</button> </td> </tr> <tr> <td>3</td> <td>alex</td> <td>haircut</td> <td> <button class="edit">edit</button> <button class="delete">delete</button> </td> </tr> </tbody> </table> <div id="myCover" class="cover hide"></div> <div id="myModel" class="model hide"> <label for="model-name">name</label> <input id="model-name" type="text"> <label for="model-hobby">hobby</label> <input id="model-hobby" type="text"> <button class="submit" id="model-submit">提交</button> <button class="close" id="model-close">关闭</button> </div> <script src="jquery-3.4.1.js"></script> <script> //show model function showModel() { $('#myCover,#myModel').removeClass('hide'); } //close model function closeModel() { $('#myModel').find('input').val(''); //清空模态框中的input $('#myCover,#myModel').addClass('hide'); } //给新增绑定事件 $('.add').on('click', function () { showModel(); }); //弹出模态框 //取消按钮 $('.close').on('click', function () { //$('#myModel input').val(''); 效率低 closeModel();//隐藏模态框 }); //edit绑定 //需要使用事件委托 基于已经存在的元素(页面加载完后存在的标签)绑定事件 $('tbody').on('click','.edit', function () { showModel(); //将原来的数据填写到模块框中的input var $currentTrEle = $(this).parent().parent(); //将当前行jquery对象保存,用于判断提交是新增还是编辑下的模块框提交 $('#myModel').data('currentTr', $currentTrEle); var name = $currentTrEle.children().eq(1).text(); var hobby = $currentTrEle.children().eq(2).text(); $('#model-name').val(name); $('#model-hobby').val(hobby); }) //模态框中的提交按钮绑定事件 $('#model-submit').on('click', function () { //取到用户填写的input的值. var name = $('#model-name').val(); var hobby = $('#model-hobby').val(); var $myModelEle = $('#myModel') //根据编辑还是新增做不同的操作 //若编辑,根据先前编辑按钮的一行 //难点在于如何让确定先前编辑哪一行,利用data方法存具体的jquery对象 var $currentTrEle = $myModelEle.data('currentTr') if ($currentTrEle !== undefined){ //edit状态 $currentTrEle.children().eq(1).text(name); $currentTrEle.children().eq(2).text(hobby); //清空之前保存的当前行 $myModelEle.removeData() }else{ //创建TR标签,将得到的数据填写进去 var trEle = document.createElement('tr'); var number = $('tr').length $(trEle).html( '<td>' + number + '</td>' + '<td>' + name + '</td>' + '<td>' + hobby + '</td>' + '<td><button class="edit">edit</button> <button class="delete">delete</button></td>' ); //若新增,则生成一条新的tr,加到label最后 //添加数据到tbody中 $('tbody').append(trEle); } closeModel() }); $('tbody').on('click','.delete',function () { //删除点积删除按钮的当前行 var $currentTrEle = $(this).parent().parent(); //更新tbody序号 //找到当前行后所有的tr,依次更新序号 $currentTrEle.nextAll().each(function () { //取到原来的序号 var oldnumber = $(this).children().first().text(); $(this).children().first().text(oldnumber-1) ; $currentTrEle.remove(); }) }) </script> </body> </html>