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(); });});
本文出自 “linux技术” 博客，请务必保留此出处http://haoyonghui.blog.51cto.com/4278020/1954584