使用Modal与JavaScript/JQuery动态更新表格行的问题

问题说明 #

当前实现中，点击表格的编辑按钮能弹出带对应分类名称的Modal，但提交修改后不会替换原有行，反而新增一行。比如修改Category B为Category D，提交后表格会多出一行Category D，原有Category B仍保留。

问题原因 #

代码未区分新增和编辑两种状态：

1. 无论哪种操作提交表单，都会执行append逻辑新增行；
2. 编辑时未记录当前要修改的目标行，无法定位到需要更新的元素。

解决方案 #

1. 新增变量currentEditingRow存储当前正在编辑的表格行元素；
2. 点击编辑按钮时，记录目标行并填充Modal输入框；
3. 表单提交时判断状态：
   • 若处于编辑状态：更新目标行的文本和隐藏输入框的值，重置编辑状态；
   • 若处于新增状态：执行原有新增逻辑添加新行；
4. 点击「Add Category」按钮时重置编辑状态，确保Modal为新增模式。

修改后的JavaScript代码 #

$(document).ready(function() {
    var counter = 0;
    var currentEditingRow = null; // 存储当前编辑的行

    $("#modalfrmdata").submit(function(e){  
        e.preventDefault();
        var categoryname = $("input[name='txtcategoryname']").val();  

        if(currentEditingRow){
            // 编辑状态：更新现有行内容
            currentEditingRow.find("td:first").text(categoryname);
            currentEditingRow.find("input:hidden").val(categoryname);
            currentEditingRow = null; // 重置编辑状态
        } else {
            // 新增状态：添加新行
            $('#categoryList tbody').append('<tr><td>' + categoryname + '<input type="hidden" name="categoryname[' + String(counter) + ']" value="' + categoryname + '"/></td><td class="content tengah"><button type="button" class="btn btn-success btn-sm btn-edit" data-toggle="modal" data-target="#modalitems">Edit</button> <button type="button" class="btn btn-danger btn-sm btn-delete">Delete</button></tr>');
            counter++;
        }

        $("input[name='txtcategoryname']").val('');  
        $('#modalitems').modal('hide'); // 提交后关闭Modal
    });

    $("#categoryList").on("click", ".btn-delete", function(){  
        $(this).parents("tr").remove();  
    });

    $("#categoryList").on("click", ".btn-edit", function(){  
        currentEditingRow = $(this).closest("tr"); // 记录当前编辑行
        var inputvalue = currentEditingRow.find("input").val(); 
        $("#txtcategoryname").val(inputvalue);
    });  

    // 点击Add Category按钮时重置编辑状态
    $("[data-target='#modalitems']").not(".btn-edit").click(function(){
        currentEditingRow = null;
        $("#txtcategoryname").val('');
    });
});

HTML代码（无需修改，保留原有结构即可） #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" style="float:right" class="btn btn-primary" data-toggle="modal" data-target="#modalitems" >Add Category</button>

<div class="table-responsive">
    <table class="table" id="categoryList">
        <thead>
            <tr>
                <th>Category Name</th>
                <th>Action</th>                 
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>            
</div>

<div class="modal fade" id="modalitems" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">    
        <div class="modal-content">
            <form id="modalfrmdata">
                <div class="table-responsive">
                    <div>
                        <table>
                            <tr>
                                <td class="col-xs-3">Category Name</td>
                                <td>:</td>
                                <td>
                                    <input type="text" id="txtcategoryname" name="txtcategoryname" class="form-control" maxlength="100" />
                                </td>
                            </tr>                                  
                        </table>                       
                    </div>          
                </div>
                <div class="modal-footer">
                    <div class="text-center">
                        <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                </div>                
            </form>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Novice