计算
安全
数据库
网络和加速
企业服务
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();
});
});亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
