使用Jquery的ajax方式实现对表格的删除和修改

使用Jquery的ajax方式实现对表格的删除和修改，类似于javaeye上的收藏管理中的标签管理功能。
Java代码：
$(function(){  
    $('.modify').click(function(){  
//找到删除的按钮，并且得到当前按钮的值作为ID找出对应的TR  
    categoryId=$(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，所以你会看到先是全部显示了两行，然后有一行突然消失的现象。
Java代码：
<!-- 在每一行都有一个唯一的标示来表示，方便用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>