使用Jquery的ajax方式实现对表格的删除和修改,相似于javaeye上的收藏管理中的类别管理功能。
http://jquery.group.iteye.com/group/topic/6524javascript
- $(function(){
-
- $('.modify').click(function(){
-
- categoryId=$(this).attr('categoryId'); $('#'+categoryId+'_modify').removeClass("view"); $('#'+categoryId+'_view').addClass('view');
- });
- $('.save').click(function(){
- categoryId=$(this).attr('categoryId');
-
- newcategoryName=$('#'+categoryId+'_modify input').val();
-
- $.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();
- });
- }
- });
- });
$(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查找-->
- <style>
- .view {
- display: none;
- }
- </style>
- <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>   <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>
<!-- 在每一行都有一个惟一的标示来表示,方便用jquery查找-->
<style>
.view {
display: none;
}
</style>
<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>   <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>
这是效果的预览图片
jquery