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";
    }
  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小虎哥的技术博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值