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=''+
' | '+
''+empname+' | '+
''+empage+' | '+
''+emp_position+' | '+
'编辑 | '+
'删除 | '+
'
';
$("#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();
});
});
文章标题:jquery实现table增删改
URL地址:
http://njwzjz.com/article/pgppgo.html