jquery实现表格行的删除和修改
使用Jquery的ajax方式实现对表格的删除和修改，类似于javaeye上的收藏管理中的标签管理功能。$(function(){ $('.modify').click(function(){//找到删除的按钮，并且得到当前按钮的值作为ID找出对应的TRcategoryId=$(this).attr('categoryId');$('#'+categoryId+'_modify').removeClass("view");$('#'+categoryId+'_view').addClass('view');}); $('.save').click(function(){categoryId=$(this).attr('categoryId');//得到你修改后的文本框中的值。newcategoryName=$('#'+categoryId+'_modify input').val();//调用jquery的ajax方法发送POST请求，其中后面的函数是在请求成功完成后才会执行。$.post("adminModifyProjectCategory.action", { projectCategoryName:newcategoryName ,projectCategoryId:categoryId},function(){$('#'+categoryId+'_viewcategory').text(newcategoryName);$('#'+categoryId+'_modify').addClass("view");$('#'+categoryId+'_view').removeClass('view');}); }); $('.delete').click(function(){if(confirm("确定删除?")){ id=$(this).attr('categoryId'); $.post("adminDeleteProjectCategory.action", {projectCategoryId :id },function(){ $('#'+id+'_view').remove(); }); }});});
以下是HTML的编写，写了两行，一行是显示用，另一行是编辑时用，编辑时用的那行是隐藏起来的。大家不要用jquery的hide功能来实现这个功能，因为浏览器要全部载入网页后才会执行jquery，所以你会看到先是全部显示了两行，然后有一行突然消失的现象。
<!-- 在每一行都有一个唯一的标示来表示，方便用jquery查找。是显示时的行--><tr id="${projectCategory.pcid }_view"> <td id="${projectCategory.pcid }_viewcategory"><s:property value="#projectCategory.categoryName" /> </td> <td> <s:date name="#projectCategory.createdTime" format="yyyy-MM-dd" nice="false" /> </td> <td><a href="#" class="delete" categoryId="<s:property value="#projectCategory.pcid" />">删除</a>&nbsp;&nbsp<a href="#" categoryId="<s:property value="#projectCategory.pcid" />" class="modify"> 修改</a> </td></tr><!-- 这行是点击修改后会出现的行，并且原先的行会隐藏。--><tr class="view" id="${projectCategory.pcid }_modify"> <td> <input type="text" value="${projectCategory.categoryName }"> </td> <td> <s:date name="#projectCategory.createdTime" format="yyyy-MM-dd" nice="false" /> </td> <td><a href="#" categoryId="<s:property value="#projectCategory.pcid" />"class="save">保存</a> </td></tr>
上面的代码是在项目中直接复制出来的，有点乱。
页:
[1]