jquery实现table增删改
html代码增删改
选择 员工姓名 员工年龄 员工职位 编辑 删除 alex 38 ceshi 编辑 删除 egon 38 kaifa 编辑 删除 wupeiqi 38 kaifa 编辑 删除 yuanhao 38 kaifa 编辑 删除
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").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(); }); });'+ ' '+empname+' '+ ''+empage+' '+ ''+emp_position+' '+ '编辑 '+ '删除 '+ '
名称栏目:jquery实现table增删改
网站URL:http://scyanting.com/article/pgppgo.html