溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
