前言
前端二面试题，话不多说看题~
功能
1.表格
2.删除，编辑，新增
代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <style> html, body { height: 100%; width: 100%; } #d1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .hide { display: none; } .content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } #d2 { height: 300px; width: 600px; background-color: white; position: fixed; top: 50%; left: 50%; margin-left: -300px; margin-top: -120px; } </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" Cellspacing="0" Cellpadding="10"> <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> <script src="http://unpkg.com/jquery"></script> <script> $(".create").on("click", function () { $(".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>"); }) $("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") $("body").on("click", ".submit", function () { var nameVal = $(".named").val(); var favVal = $(".fave").val(); a1.html(nameVal) a2.html(favVal) console.log(nameVal, favVal) $(".c1").addClass("hide"); }) }) </script> </body> </html>
效果图
