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
    评论
好的,以下是一个简单的示例代码,演示了如何在表格点击某一的“编辑”按钮后,弹出一个编辑表单,用户可以在表单修改数据,最后点击保存按钮保存修改后的数据并更新到表格对应的。 HTML 代码: ```html <table id="myTable"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tom</td> <td>18</td> <td><button class="editBtn">编辑</button></td> </tr> <tr> <td>2</td> <td>Jerry</td> <td>20</td> <td><button class="editBtn">编辑</button></td> </tr> </tbody> </table> <div id="editForm" style="display:none;"> <h3>编辑信息</h3> <form> <div> <label>ID:</label> <input type="text" id="editId" readonly> </div> <div> <label>Name:</label> <input type="text" id="editName"> </div> <div> <label>Age:</label> <input type="text" id="editAge"> </div> <button type="button" id="saveBtn">保存</button> <button type="button" id="cancelBtn">取消</button> </form> </div> ``` JavaScript 代码: ```javascript $(function() { // 给编辑按钮添加点击事件 $('.editBtn').click(function() { // 获取当前数据 var id = $(this).parent().siblings(':first').text(); var name = $(this).parent().siblings(':eq(1)').text(); var age = $(this).parent().siblings(':eq(2)').text(); // 将数据填充到表单 $('#editId').val(id); $('#editName').val(name); $('#editAge').val(age); // 显示编辑表单 $('#editForm').show(); }); // 给保存按钮添加点击事件 $('#saveBtn').click(function() { // 获取表单数据 var id = $('#editId').val(); var name = $('#editName').val(); var age = $('#editAge').val(); // 更新表格对应数据 $('#myTable tbody tr').each(function() { if ($(this).find('td:first').text() == id) { $(this).find('td:eq(1)').text(name); $(this).find('td:eq(2)').text(age); return false; // 跳出 each 循环 } }); // 关闭编辑表单 $('#editForm').hide(); }); // 给取消按钮添加点击事件 $('#cancelBtn').click(function() { // 关闭编辑表单 $('#editForm').hide(); }); }); ``` 这段代码使用了 jQuery 来简化 DOM 操作。在点击编辑”按钮时,使用 jQuery 的 siblings 方法获取当前数据,并将数据填充到表单。在点击“保存”按钮时,使用 jQuery 的 each 方法遍历表格所有,找到对应的并更新数据。最后,使用 jQuery 的 hide 方法关闭编辑表单。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

小虎哥的技术博客

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

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

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

打赏作者

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

抵扣说明:

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

余额充值