jquery实现table增删改

2025-01-15 技术教程

html代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>增删改</title><linkrel="stylesheet"type="text/css"href="css/index.css"/><scriptsrc="js/jquery-3.1.1.js"></script><scriptsrc="js/index.js"></script></head><body><divclass="btn"><inputtype="button"value="添加"class="one"/><inputtype="button"value="全选"class="one"/><inputtype="button"value="反选"class="one"/><inputtype="button"value="取消"class="one"/></div><divclass="tab"><tableborder="1"><tr><th>选择</th><th>员工姓名</th><th>员工年龄</th><th>员工职位</th><th>编辑</th><th>删除</th></tr><tr><td><inputtype="checkbox"class="checkbox"/></td><td>alex</td><td>38</td><td>ceshi</td><td><aclass="edit"href="#">编辑</a></td><td><aclass="delete"href="#">删除</a></td></tr><tr><td><inputtype="checkbox"class="checkbox"/></td><td>egon</td><td>38</td><td>kaifa</td><td><aclass="edit"href="#">编辑</a></td><td><aclass="delete"href="#">删除</a></td></tr><tr><td><inputtype="checkbox"class="checkbox"/></td><td>wupeiqi</td><td>38</td><td>kaifa</td><td><aclass="edit"href="#">编辑</a></td><td><aclass="delete"href="#">删除</a></td></tr><tr><td><inputtype="checkbox"class="checkbox"/></td><td>yuanhao</td><td>38</td><td>kaifa</td><td><aclass="edit"href="#">编辑</a></td><td><aclass="delete"href="#">删除</a></td></tr></table></div><divclass="shadehide"></div><divclass="add_formhide"><formid="form1"action=""><labelfor="empname">员工姓名:</label><inputtype="text"id="empname"name="empname"/><br><labelfor="empage">员工年龄:</label><inputtype="text"id="empage"name="empage"/><br><labelfor="emp_position">员工职位:</label><inputtype="text"id="emp_position"name="emp_position"/><br><br><inputtype="button"value="保存"id="save"/><inputtype="button"value="取消"id="cancel"/></form></div><divclass="edit_formhide"><formid="form11"action=""><labelfor="empname1">员工姓名:</label><inputtype="text"id="empname1"name="empname1"/><br><labelfor="empage1">员工年龄:</label><inputtype="text"id="empage1"name="empage1"/><br><labelfor="emp_position1">员工职位:</label><inputtype="text"id="emp_position1"name="emp_position1"/><br><br><inputtype="button"value="保存"id="save1"/><inputtype="button"value="取消"id="cancel1"/></form></div></body></html>

css代码.btn{margin-top:20px;margin-left:400px;}.tabtable{line-height:40px;margin-left:400px;margin-top:20px;background-color:wheat;text-align:center;width:600px;}.tabtablea{text-decoration:none;}.tabtablea: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代码/***Createdbyhyhon2017/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");}elseif($(this).val()=="全选"){$(".checkbox").prop("checked",true);}elseif($(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();varinx=$(this).parent().parent().index();//alert(inx);varempname=$(this).parent().parent().children().eq(1).text();varempage=$(this).parent().parent().children().eq(2).text();varemp_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(){varempname=$("#empname").val();varempage=$("#empage").val();varemp_position=$("#emp_position").val();varhtmlStr='<tr>'+'<td><inputtype="checkbox"class="checkbox"></td>'+'<td>'+empname+'</td>'+'<td>'+empage+'</td>'+'<td>'+emp_position+'</td>'+'<td><aclass="edit"href="#">编辑</a></td>'+'<td><aclass="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();varinx=$(this).parent().parent().index();//alert(inx);$(this).parent().parent().remove();});});