html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>增删改</title> <link rel = "stylesheet" type="text/css" href="css/index.css"/> <script src="js/jquery-3.1.1.js"></script> <script src="js/index.js"></script> </head> <body> <!--添加,全选,反选,取消按钮--> <div class="btn"> <input type="button" value="添加" class="one"/> <input type="button" value="全选" class="one"/> <input type="button" value="反选" class="one"/> <input type="button" value="取消" class="one"/> </div> <!--结束--> <!--员工信息表--> <div class="tab"> <table border="1"> <tr> <th>选择</th> <th>员工姓名</th> <th>员工年龄</th> <th>员工职位</th> <th>编辑</th> <th>删除</th> </tr> <tr> <td><input type="checkbox" class="checkbox"/></td> <td>alex</td> <td>38</td> <td>ceshi</td> <td><a class="edit" href="#">编辑</a></td> <td><a class="delete" href="#">删除</a></td> </tr> <tr> <td><input type="checkbox" class="checkbox"/></td> <td>egon</td> <td>38</td> <td>kaifa</td> <td><a class="edit" href="#">编辑</a></td> <td><a class="delete" href="#">删除</a></td> </tr> <tr> <td><input type="checkbox" class="checkbox"/></td> <td>wupeiqi</td> <td>38</td> <td>kaifa</td> <td><a class="edit" href="#">编辑</a></td> <td><a class="delete" href="#">删除</a></td> </tr> <tr> <td><input type="checkbox" class="checkbox"/></td> <td>yuanhao</td> <td>38</td> <td>kaifa</td> <td><a class="edit" href="#">编辑</a></td> <td><a class="delete" href="#">删除</a></td> </tr> </table> </div> <!--结束--> <!--遮罩--> <div class="shade hide"></div> <!--结束--> <!--弹出表单--> <div class="add_form hide"> <form id="form1" action=""> <label for="empname">员工姓名:</label><input type="text" id="empname" name="empname"/><br> <label for="empage">员工年龄:</label><input type="text" id="empage" name="empage"/><br> <label for="emp_position">员工职位:</label><input type="text" id="emp_position" name="emp_position"/><br> <br> <input type="button" value="保存" id="save"/> <input type="button" value="取消" id="cancel"/> </form> </div> <div class="edit_form hide"> <form id="form11" action=""> <label for="empname1">员工姓名:</label><input type="text" id="empname1" name="empname1"/><br> <label for="empage1">员工年龄:</label><input type="text" id="empage1" name="empage1"/><br> <label for="emp_position1">员工职位:</label><input type="text" id="emp_position1" name="emp_position1"/><br> <br> <input type="button" value="保存" id="save1"/> <input type="button" value="取消" id="cancel1"/> </form> </div> <!--结束--> </body> </html>
css代码 .btn{ margin-top:20px; margin-left: 400px; } .tab table{ line-height: 40px; margin-left: 400px; margin-top: 20px; background-color: wheat; text-align: center; width: 600px; } .tab table a{ text-decoration: none; } .tab table a:hover{ color:red; } .hide{ display: none; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: darkgray; opacity: 0.4; } .add_form{ margin-left: 500px; margin-top: 100px; width: 460px; height: 300px; position: absolute; } .edit_form{ margin-left: 500px; margin-top: 100px; width: 460px; height: 300px; position: absolute; } jquery代码 /** * Created by hyh on 2017/8/8. */ $(document).ready(function(){ $(document).on('click','.one',function(){ if($(this).val() == "添加"){ $(".shade").removeClass("hide"); $(".add_form").removeClass("hide"); $(".edit_form").addClass("hide"); $(".btn").addClass("hide"); $(".tab").addClass("hide"); } else if($(this).val() == "全选"){ $(".checkbox").prop("checked",true); } else if($(this).val() == "反选"){ $(".checkbox").each(function(){ $(this).prop("checked", !$(this).prop("checked")); }); } else{ $(".checkbox").each(function(){ $(this).prop("checked",false); }); } }); $(document).on('click','.edit',function(e){ e.preventDefault(); var inx = $(this).parent().parent().index(); // alert(inx); var empname=$(this).parent().parent().children().eq(1).text(); var empage=$(this).parent().parent().children().eq(2).text(); var emp_position=$(this).parent().parent().children().eq(3).text(); $("#empname1").prop("value",empname); $("#empage1").prop("value",empage); $("#emp_position1").prop("value",emp_position); $(".btn").addClass("hide"); $(".tab").addClass("hide"); $(".add_form").addClass("hide"); $(".shade").removeClass("hide"); $(".edit_form").removeClass("hide"); $("#save1").click(function(){ // alert(inx); empname = $("#empname1").val(); empage = $("#empage1").val(); emp_position = $("#emp_position1").val(); $("table").children().children().eq(inx).children().eq(1).text(empname); $("table").children().children().eq(inx).children().eq(2).text(empage); $("table").children().children().eq(inx).children().eq(3).text(emp_position); $(".btn").removeClass("hide"); $(".tab").removeClass("hide"); $(".shade").addClass("hide"); $(".edit_form").addClass("hide"); $(".add_form").addClass("hide"); }); }); $("#save").click(function(){ var empname = $("#empname").val(); var empage = $("#empage").val(); var emp_position = $("#emp_position").val(); var htmlStr='<tr>'+ '<td><input type="checkbox" class="checkbox"></td>'+ '<td>'+empname+'</td>'+ '<td>'+empage+'</td>'+ '<td>'+emp_position+'</td>'+ '<td><a class="edit" href="#">编辑</a></td>'+ '<td><a class="delete" href="#">删除</a></td>'+ '</tr>'; $("#empname").val(''); $("#empage").val(''); $("#emp_position").val(''); $("table").append(htmlStr); $(".btn").removeClass("hide"); $(".tab").removeClass("hide"); $(".add_form").addClass("hide"); $(".edit_form").addClass("hide"); $(".shade").addClass("hide"); }); $(document).on('click','.delete',function(e){ e.preventDefault(); var inx = $(this).parent().parent().index(); // alert(inx); $(this).parent().parent().remove(); }); });
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。