您的位置:首页 > Web前端 > JQuery

JQuery ajax 删除表格

2010-12-22 16:06 281 查看
使用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>   <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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: