博客

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";
    }