table 點擊編輯 修改當前行

table 點擊編輯 修改當前行

先看效果圖

---

---

---

html+js

<c:forEach items="${goodsS}" var="goods">
                    <tr bgcolor="#DEE5FA">
                        <td align="center" id="goodsId" class="txlrow"><c:out
                                value="${goods.goodsId}"></c:out></td>
                        <td align=center id="goodsType" class=txlrow><c:out
                                value="${goods.goodsType}"></c:out></td>
                        <td align=center id="goodsName" class=txlrow><c:out
                                value="${goods.goodsName}"></c:out></td>
                        <td align=center id="goodsContent" class=txlrow><c:out
                                value="${goods.goodsContent}"></c:out></td>
                        <td align=center id="goodsPrice" class=txlrow><c:out
                                value="${goods.goodsPrice}"></c:out></td>
                        <td align=center id="goodsSell" class=txlrow><c:out
                                value="${goods.goodsSell}"></c:out></td>
                     <td align=center class=txlrow> <input type="button" value="編輯"></td>
                    </tr>
                </c:forEach>```

`

        $("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("<input type='text' value='"+$(this).text()+"'>");
                    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";
    }