jQuery实现点击表格编辑按钮将行数据回填至表单输入框

你现有代码的编辑功能存在两个明显问题：

• 编辑按钮的事件委托绑定错了目标，监听的是删除按钮的.btn_remove类，点击Edit不会触发任何逻辑
• 事件回调为空，没有做数据读取和表单回填的处理

以下是修复后的完整代码，除了实现你要的点击Edit回填表单功能，还补全了编辑后保存更新的逻辑，HTML部分不需要做任何修改：

修复后JS代码 #

// 全局变量标记当前编辑的联系人索引，-1为默认新增状态
let editIndex = -1;
var myContacts = [];
$(document).ready(function () {
    let btn = $("#btn-1");
    let btn2 = $("#btn-2");
    let btn3 = $("#btn-3");

    btn.click(function () {
        let name = $("#name");
        let age = $("#age");
        let job = $("#job");
        let address = $("#address");
        let mobile = $("#mobile");
        if (name.val().length > 0 && age.val().length > 0 && job.val().length > 0 && address.val().length > 0 && mobile.val().length > 0) {
            let contact = {
                name: name.val(),
                age: age.val(),
                job: job.val(),
                address: address.val(),
                mobile: mobile.val()
            }
            // 区分新增/编辑状态
            if(editIndex === -1){
                myContacts.push(contact)
            }else{
                myContacts[editIndex] = contact;
                // 保存后重置为新增状态
                editIndex = -1;
            }
        }else{
            alert("plz fill the form")
        };
        // 清空表单
        $("#name").val("");
        $("#age").val("");
        $("#job").val("");
        $("#address").val("");
        $("#mobile").val("");
        // 刷新列表
        showMyContacts(myContacts);
        console.log(myContacts);
    });
    btn2.click(function () {
        showMyContacts(myContacts);
    });
    $(document).on('click', ".btn_remove", function () {
        let index = $(this).data("index");
        myContacts.splice(index, 1);
        showMyContacts(myContacts);
    });
    // 修正编辑按钮事件绑定
    $(document).on('click', ".btn_edit", function () {
        // 获取当前行对应联系人索引
        let index = $(this).data("index");
        let currentContact = myContacts[index];
        // 数据回填到表单
        $("#name").val(currentContact.name);
        $("#age").val(currentContact.age);
        $("#job").val(currentContact.job);
        $("#address").val(currentContact.address);
        $("#mobile").val(currentContact.mobile);
        // 标记当前编辑的索引
        editIndex = index;
    });
});
function showMyContacts(myContacts) {
    let table = $("#my_table tbody");
    table.html("");
    for (let i = 0; i < myContacts.length; i++) {
        table.append(`
        <tr>
            <td>${myContacts[i].name}</td>
            <td>${myContacts[i].age}</td>
            <td>${myContacts[i].job}</td>
            <td>${myContacts[i].address}</td>
            <td>${myContacts[i].mobile}</td>
            <td><button data-index="${i}" class="btn btn-danger btn_remove">Remove</button></td>
            <td><button data-index="${i}" class="btn btn-primary btn_edit">Edit</button></td>
        </tr>
        `);
    };
};

HTML代码（保持原样即可） #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container m-5">
    <div class="row">
        <div class="col-md-6">
            <span>Name :</span>
            <input id="name" type="text" class="d-flex mb-3">
            <span>Age :</span>
            <input id="age" type="number" class="d-flex mb-3">
            <span>Job :</span>
            <input id="job" type="text" class="d-flex mb-3">
            <span>Address :</span>
            <input id="address" type="text" class="d-flex mb-3">
            <span>Mobile :</span>
            <input id="mobile" type="tel" class="d-flex mb-3">
            <button id="btn-1" class="mt-2">Save</button>
            <button id="btn-2" class="mt-2">my Contacts</button>
        </div>
        <div class="col-md-6">
            <table id="my_table" class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Job</th>
                        <th>Address</th>
                        <th>Mobile</th>
                        <th>action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

• 点击任意行的Edit按钮，对应联系人的所有信息会自动填充到上方表单
• 修改表单内容后点击Save，会直接更新对应联系人条目，不会生成重复数据
• 保存完成后自动刷新联系人列表，表单清空回到新增状态

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