jquery兑现表格行的删除和修改
jquery实现表格行的删除和修改
使用Jquery的ajax方式实现对表格的删除和修改,类似于javaeye上的收藏管理中的标签管理功能。
以下是HTML的编写,写了两行,一行是显示用,另一行是编辑时用,编辑时用的那行是隐藏起来的。大家不要用jquery的hide功能来实现这个功能,因为浏览器要全部载入网页后才会执行jquery,所以你会看到先是全部显示了两行,然后有一行突然消失的现象。
上面的代码是在项目中直接复制出来的,有点乱。
有没有源码哦
源码和这个是一样的,直接复制就好了啊
你是不是输出的时候一条数据做了两条?一个做为view一个做为modify???这样会不会觉得数据输出过大啊?
是啊,那你觉得怎么做比较好啊?
使用Jquery的ajax方式实现对表格的删除和修改,类似于javaeye上的收藏管理中的标签管理功能。
$(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,所以你会看到先是全部显示了两行,然后有一行突然消失的现象。
<!-- 在每一行都有一个唯一的标示来表示,方便用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>
上面的代码是在项目中直接复制出来的,有点乱。
1 楼
phenom
2008-09-16
大家不要用jquery的hide功能来实现这个功能,因为浏览器要全部载入网页后才会执行jquery
我记得好像是有个document.ready(function()) 是说DOM载入就可以执行JS了,那就不会出现你说的情况了,不知道有没有记错,
我记得好像是有个document.ready(function()) 是说DOM载入就可以执行JS了,那就不会出现你说的情况了,不知道有没有记错,
2 楼
cuilidong
2008-10-07
有没有源码哦
3 楼
wujiekangyun
2008-11-02
cuilidong 写道
有没有源码哦
源码和这个是一样的,直接复制就好了啊
4 楼
huayiluo
2008-11-19
你是不是输出的时候一条数据做了两条?
一个做为view一个做为modify???
这样会不会觉得数据输出过大啊?
一个做为view一个做为modify???
这样会不会觉得数据输出过大啊?
5 楼
wujiekangyun
2008-11-22
huayiluo 写道
你是不是输出的时候一条数据做了两条?一个做为view一个做为modify???这样会不会觉得数据输出过大啊?
是啊,那你觉得怎么做比较好啊?