zoukankan      html  css  js  c++  java
  • jquery实现表格的行的删除和更新

    使用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查找-->
    <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;&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>

  • 相关阅读:
    1289大鱼吃小鱼(STL中栈的应用)
    1347旋转字符串
    2133排队接水——优先队列
    7-37 整数分解为若干项之和(20 分)
    有一个VC的bug:非标准语法
    指针的一点点用法
    好久没写的博客_数组的长度等小问题
    解决strcmp的错误以及VS的快捷键
    输入流和注释
    VS出现异常?!和十进制转二进制比是小事
  • 原文地址:https://www.cnblogs.com/sky7034/p/2107649.html
Copyright © 2011-2022 走看看