标签：ack OLE hid addclass opacity func parent title isp
效果示例:
个人的练习代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style> body{ margin: 0; padding: 0; } .cover{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #b0b0b0; opacity: 0.4; z-index: 2; } .modal{ width: 500px; height: 400px; position: fixed; z-index: 3; background-color: white; left: 50%; top: 40%; margin-left: -250px; margin-top: -200px; } .hide{ display: none; } </style> </head> <body> <div class="cover hide"></div> <div class="modal hide"> <div> <label for="name">姓名</label><input type="text" id="name"> </div> <div> <label for="hobby">爱好</label><input type="text" id="hobby"> </div> <button id="cancel">取消</button> <button id="submit">提交</button> </div> <button id="add">新增</button> <table border="1"> <thead> <tr> <td>#</td> <td>姓名</td> <td>爱好</td> <td colspan="2" style="text-align: center">操作</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小明</td> <td id="t1">抽烟,喝酒,烫头</td> <td><button class="move">删除</button></td> <td><button class="edit">编辑</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>贝吉塔</td> <td>修行,找布尔玛吃东西</td> <td><button class="move">删除</button></td> <td><button class="edit">编辑</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>孙悟空</td> <td>吃饭去界王星修炼</td> <td><button class="move">删除</button></td> <td><button class="edit">编辑</button></td> </tr> </tbody> </table> <script> // 新增按钮 $("#add").click(function () { $("#name,#hobby").prop("value",""); $(".cover,.modal").removeClass("hide"); }); // 取消按钮 $("#cancel").click(function () { $(".cover,.modal").addClass("hide"); }); //删除行,用到事件委托,主要是因为新增的行不会自动添加按钮事件 $("tbody").on("click",".move",function () { $(this).parent().parent().remove(); }); //提交 $("#submit").click(function () { var name = $("#name").val(); var hobby = $("#hobby").val(); if($("#submit").data("k")){ bt_edit = $("#submit").data("k"); bt_edit.parent().prev().prev().prev().text(name); bt_edit.parent().prev().prev().text(hobby); }else{ var s = "<tr>" + " <td><input type=\"checkbox\"></td>" + " <td>"+name+"</td>" + " <td>"+hobby+"</td>" + " <td><button class=\"move\">删除</button></td>" + "<td><button>编辑</button></td></tr>"; $("tbody").append(s); } $(".cover,.modal").addClass("hide"); $("#submit").data("k",""); }); //编辑 $("tbody").on("click",".edit",function () { //设定一个标志位 $("#submit").data("k",$(this)); var name = $(this).parent().prev().prev().prev().text(); var hobby = $(this).parent().prev().prev().text(); console.log(name); $("#name").val(name); $("#hobby").val(hobby); $(".cover,.modal").removeClass("hide"); }) </script> </body> </html>
标签：ack OLE hid addclass opacity func parent title isp
原文地址：https://www.cnblogs.com/robertx/p/10398208.html
