当前位置：首页 → 问答吧 → jquery实现表格的行的删除和更新

jquery实现表格的行的删除和更新

时间：2009-06-02

来源：互联网

$(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，所以你会看到先是全部显示了两行，然后有一行突然消失的现象。

<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> &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>

作者: wujiekangyun 发布时间: 2009-06-02

版主啊，你的这个编辑器怎么用啊，没有专门的代码样式吗？这样子太难看了

作者: wujiekangyun 发布时间: 2009-06-02

发个源码过来呢！这样怎么看呢，一点格式也没有！

作者: hongzh426 发布时间: 2009-06-02

你不会在代码模式用code标签啊…

作者: keakon 发布时间: 2009-06-02

就是code标签啊……

作者: shawphy 发布时间: 2009-06-02