table 点击编辑 修改当前行

table 点击编辑 修改当前行

先看效果图

---

---

---

html+js

"${goodsS}" var="goods">
                    "#DEE5FA">
                        "center" id="goodsId" class="txlrow">out
                                value="${goods.goodsId}">out>
                        "goodsType" class=txlrow>out
                                value="${goods.goodsType}">out>
                        "goodsName" class=txlrow>out
                                value="${goods.goodsName}">out>
                        "goodsContent" class=txlrow>out
                                value="${goods.goodsContent}">out>
                        "goodsPrice" class=txlrow>out
                                value="${goods.goodsPrice}">out>
                        "goodsSell" class=txlrow>out
                                value="${goods.goodsSell}">out>
                      "button" value="编辑">
                    
                ```

`

        $("input:button").click(function() {
        if($(this).val()=="确定"){
            var goods={};
            goods["goodsId"]=$(this).parents("tr").children("#goodsId").children('input').val();
            goods["goodsType"]=$(this).parents("tr").children("#goodsType").children('input').val();
            goods["goodsName"]=$(this).parents("tr").children("#goodsName").children('input').val();
            goods["goodsContent"]=$(this).parents("tr").children("#goodsContent").children('input').val();
            goods["goodsPrice"]=$(this).parents("tr").children("#goodsPrice").children('input').val();
            goods["goodsSell"]=$(this).parents("tr").children("#goodsSell").children('input').val();

              $.ajax({
                type : "post",
                 url :"<%=ppath%>/goodsManager/edit",
                 data :goods,
                 dataType : "json",
                 success : function(res) {
                     if(res=="success")
                         alert("修改成功");
               }
        });
        }


         str = $(this).val()=="编辑"?"确定":"编辑";  
         $(this).val(str);   // 按钮被点击后，在“编辑”和“确定”之间切换
         $(this).parent().siblings("td").each(function() {  // 获取当前行的其他单元格
               var obj_text = $(this).find("input:text");    // 判断单元格下是否有文本框
               if(!obj_text.length)   // 如果没有文本框，则添加文本框使之可以编辑
                    $(this).html("");
                    else   
                        $(this).html(obj_text.val());    
            });

        });

控制器

    @ResponseBody
    @RequestMapping(value = "/edit",method=RequestMethod.POST)
    public String  editGoods(HttpServletRequest request, HttpServletResponse response, Goods goods) {
        goodsService.update(goods);
        System.out.println("------goodsid"+goods.toString());
        return "success";
    }