使用Jquery的ajax方式实现对表格的删除和修改，类似于javaeye上的收藏管理中的类别管理功能。
http://jquery.group.iteye.com/group/topic/6524

Java代码 使用Jquery的ajax方式实现对表格的删除和修改_休闲 使用Jquery的ajax方式实现对表格的删除和修改_jquery _02
  1. $(function(){   
  2.   
  3.     $('.modify').click(function(){   
  4. //找到删除的按钮，并且得到当前按钮的值作为ID找出对应的TR   
  5.     categoryId=$(this).attr('categoryId');          $('#'+categoryId+'_modify').removeClass("view");        $('#'+categoryId+'_view').addClass('view');   
  6.     });   
  7.     $('.save').click(function(){   
  8.     categoryId=$(this).attr('categoryId');   
  9. //得到你修改后的文本框中的值。   
  10.     newcategoryName=$('#'+categoryId+'_modify input').val();   
  11. //调用jquery的ajax方法发送POST请求，其中后面的函数是在请求成功完成后才会执行。   
  12.     $.post("adminModifyProjectCategory.action", { projectCategoryName:newcategoryName ,projectCategoryId:categoryId},function(){   
  13.     $('#'+categoryId+'_viewcategory').text(newcategoryName);    $('#'+categoryId+'_modify').addClass("view");   
  14.     $('#'+categoryId+'_view').removeClass('view');   
  15.     });    
  16.     });   
  17.     $('.delete').click(function(){   
  18.     if(confirm("确定删除?"))   
  19.     {   
  20.              id=$(this).attr('categoryId');   
  21.         $.post("adminDeleteProjectCategory.action", {projectCategoryId :id },function(){   
  22.             $('#'+id+'_view').remove();   
  23.          });            
  24.     }   
  25.     });   
  26. });  


以下是HTML的编写，写了两行，一行是显示用，另一行是编辑时用，编辑时用的那行是隐藏起来的。

大家不要用jquery的hide功能来实现这个功能，因为浏览器要全部载入网页后才会执行jquery，所以你会看到先是全部显示了两行，然后有一行突然消失的现象。
 

Java代码 使用Jquery的ajax方式实现对表格的删除和修改_休闲 使用Jquery的ajax方式实现对表格的删除和修改_jquery _02
  1. <!-- 在每一行都有一个唯一的标示来表示，方便用jquery查找-->   
  2. <style>   
  3. .view {   
  4.  display: none;   
  5. }   
  6. </style>   
  7. <tr id="${projectCategory.pcid }_view">              
  8.     <td id="${projectCategory.pcid }_viewcategory">           <s:property value="#projectCategory.categoryName" />     
  9.    </td>   
  10.    <td>   
  11.      <s:date name="#projectCategory.createdTime" format="yyyy-MM-dd"  
  12.      nice="false" />                    
  13.    </td>   
  14.    <td>   
  15.     <a href="#" class="delete" categoryId="<s:property value="#projectCategory.pcid" />">删除</a>&nbsp;&nbsp            <a href="#" categoryId="<s:property value="#projectCategory.pcid" />" class="modify"> 修改</a>   
  16.    </td>   
  17. </tr>   
  18. <tr class="view" id="${projectCategory.pcid }_modify">   
  19.     <td>   
  20.          <input type="text" value="${projectCategory.categoryName }">   
  21.     </td>   
  22.     <td>   
  23.          <s:date name="#projectCategory.createdTime" format="yyyy-MM-dd" nice="false" />   
  24.      </td>   
  25.      <td>   
  26.     <a href="#" categoryId="<s:property value="#projectCategory.pcid" />"  
  27.     class="save">保存</a>   
  28.       </td>   
  29. </tr>  


这是效果的预览图片
使用Jquery的ajax方式实现对表格的删除和修改_jquery _07
使用Jquery的ajax方式实现对表格的删除和修改_ajax_08