<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>就三个按钮的作业讲解</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .hide { display: none; } /*遮罩层*/ .cover { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: black; opacity: 0.8; z-index: 999; } .modal { position: fixed; top: 50%; left: 50%; height: 200px; width: 400px; margin-top: -100px; margin-left: -200px; background-color: white; z-index: 1000; } </style> </head> <body> <button id="add">新增</button> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>街舞</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr> <td>2</td> <td>Alex</td> <td>烫头</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr> <td>3</td> <td>苑局</td> <td>日天</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> </tbody> </table> <div id="myCover" class="cover hide"></div> <div id="myModal" class="modal hide"> <div> <p> <label for="modal-name">姓名</label> <input type="text" id="modal-name"> </p> <p> <label for="modal-hobby">爱好</label> <input type="text" id="modal-hobby"> </p> <p> <button id="modal-submit">提交</button> <button id="modal-cancel">取消</button> </p> </div> </div> <script src="jquery-3.3.1.js"></script> <script> // 弹出模态框的函数 function showModal() { // 把模态框显示出来 $("#myCover, #myModal").removeClass("hide"); } // 隐藏模态框的函数 function hideModal() { // 把模态框隐藏起来 $("#myCover, #myModal").addClass("hide"); // 清空模态框中input标签的值 $("#modal-name, #modal-hobby").val(""); } // 新增按钮绑定事件 $("#add").on("click", function () { showModal(); }); // 给模态框中的取消按钮绑定事件 $("#modal-cancel").on("click", function () { hideModal(); }); var $table = $("table"); // 表格中每一行的删除按钮,绑定事件 $table.on("click", ".delete-btn", function () { // 更新表格中当前行后面每一行的序号 // 找到当前行后面的每一行 $(this).parent().parent().nextAll().each(function () { // each中的this和外面的this不一样了! var num = $(this).children().first().text(); $(this).children().first().text(num-1); }); // 找到当前行,删除 $(this).parent().parent().remove(); }); // 编辑按钮绑定事件 $table.on("click", ".edit-btn", function () { // 显示模态框 showModal(); // 把原来的内容填充到模态框中 // 取到当前编辑的这一行 var $currentTr = $(this).parent().parent(); // 将当前编辑行保存到模态框对象中 $("#myModal").data("key", $currentTr); // 1. 取值 var name = $currentTr.children().eq(1).text(); var hobby = $currentTr.children().eq(2).text(); // 填充到模态框 $("#modal-name").val(name); $("#modal-hobby").val(hobby); }); // 点击模态框中的提交按钮 $("#modal-submit").on("click", function () { // 获取模态框中input的值 var name = $("#modal-name").val(); var hobby = $("#modal-hobby").val(); // 如何区分是编辑还是新增 var $tr = $("#myModal").data("key"); if ($tr !== undefined){ // 可以简写,这里是为了引出来好理解 // 是编辑操作 $tr.children().eq(1).text(name); $tr.children().eq(2).text(hobby); // 编辑完之后要把之前保存的data删掉 $("#myModal").removeData("key"); }else { // 就是新增操作 // 创建一个新的tr标签 var newTr = document.createElement("tr"); // 塞td标签 var num = $("table tr").length; var eleStr = "<td>" + num + "</td>"; eleStr += "<td>" + name + "</td>"; eleStr += "<td>" + hobby + "</td>"; eleStr += "<td>" + '<button class="edit-btn">编辑</button> <button class="delete-btn">删除</button>' + "</td>"; newTr.innerHTML = eleStr; // 将新创建的tr标签追加到table里 $("tbody").append(newTr); } // 隐藏模态框 hideModal(); }) </script> </body> </html>
三个按钮事例
猜你喜欢
转载自www.cnblogs.com/python052044/p/8933661.html
周排行