表格实现-增、删、改、查
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <style> #d1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .hide { display: none; } #d2 { height: 300px; width: 600px; background-color: white; position: fixed; top: 50%; left: 50%; margin-left: -300px; margin-top: -150px } </style> </head> <body> <div id="d1" class=" c1 hide"></div> <div id="d2" class=" c1 hide"></div> <div class="content"> <input type="button" class="create" value="新增"> <table border="1px"> <thead> <tr class="title"> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="name">EGon</td> <td class='fav'>街舞</td> <td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td> </tr> <tr> <td>2</td> <td class="name">ALEX</td> <td class='fav'>理发</td> <td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td> </tr> <tr> <td>3</td> <td class="name">小强</td> <td class='fav'>二人转</td> <td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td> </tr> </tbody> </table> </div> <!--<div>--> <!--<p>姓名:<input type="text"></p>--> <!--<p>爱好:<input type="text"></p>--> <!--<p><input type="button" value="提交"><input type="button" value="取消"></p>--> <!--</div>--> <script src="jquery-3.3.1.min.js"></script> <script> $(".create").on("click", function () { $(".c1").removeClass("hide") console.log("123") $("#d2").html("<p>姓名:<input class='named' type='text'></p><p>爱好:<input class='fave' type='text'></p> <p><input class='submit' type='button' value='提交'><input class='cancle' type='button' value='取消'></p>"); console.log("456") }) $("body").on("click", ".cancle", function () { $(".c1").addClass("hide") }) $("body").on("click", ".submit", function () { if ($(".named").val() == "") { var nameVal = $(".named").val(); var favVal = $(".fave").val(); var xuHao = parseInt($("tr:last").children().first().text()) + 1 console.log(xuHao, nameVal, favVal) var trEle = document.createElement("tr"); $("tbody").append(trEle) $(trEle).html("<td class='q1'></td>, <td class='q2' ></td> ,<td class='q3'></td> ,<td><input type='button' value='编辑'><input type='button' class='delete' value='删除'></td>"); $(".q1").text(xuHao); $(".q2").text(nameVal); $(".q3").text(favVal); $(".c1").addClass("hide"); } else { var nameVal = $(".named").val(); var favVal = $(".fave").val(); } }) $("body").on("click", ".delete", function () { $(this).parent().parent().remove() }) $("body").on("click", ".add", function () { $(this).data("name", $(this).parent().siblings(".name").html()); console.log($(this).data("name")); $(this).data("fav", $(this).parent().siblings(".fav").html()); console.log($(this).data("fav")); $(".c1").removeClass("hide"); $("#d2").html("<p>姓名:<input class='named' type='text'></p><p>爱好:<input class='fave' type='text'></p> <p><input class='submit' type='button' value='提交'><input class='cancle' type='button' value='取消'></p>"); $(".named")[0].value = $(this).data("name"); $(".fave")[0].value = $(this).data("fav"); var nameVal = $(".named").val(); var favVal = $(".fave").val(); console.log(nameVal, favVal) var a1 = $(this).parent().siblings(".name") var a2 = $(this).parent().siblings(".fav") // $(this).parent().siblings(".name").html(nameVal) // $(this).parent().siblings(".fav").html(favVal) console.log("888") $("body").on("click", ".submit", function () { var nameVal = $(".named").val(); var favVal = $(".fave").val(); a1.html(nameVal) a2.html( favVal) console.log(nameVal, favVal) console.log("5555555") $(".c1").addClass("hide"); }) }) </script> </body> </html>
I can feel you forgetting me。。 有一种默契叫做我不理你,你就不理我