html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>增删改</title> <link rel = "stylesheet" type="text/css" href="css/index.css"/> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.1.1.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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(); });});
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦