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
原文地址：http://haoyonghui.blog.51cto.com/4278020/1954584
