点击用户列表的Edit按钮获取编辑数据时出现TypeError错误求助

嘿，我看了你的代码，发现两个关键问题导致点击Edit按钮时获取数据失败，咱们一步步来解决：

问题1：事件目标错误（点击的是图标而非a标签） #

你绑定了document的点击事件，当用户点击Edit按钮里的<i class="fa fa-pencil"></i>图标时，targetElement是这个<i>标签，而不是带有updateUser类的<a>标签。这时候classList.contains('updateUser')会返回false，你的编辑逻辑根本不会执行，甚至可能因为取不到dataset.userid而报错。

解决方案：
判断时先找到最近的.updateUser元素，而不是直接用点击的目标元素：

// 替换原来的updateUser判断逻辑
if(targetElement.closest('.updateUser')){
    e.preventDefault();
    const updateLink = targetElement.closest('.updateUser');
    const userId = updateLink.dataset.userid;
    const row = updateLink.closest('tr');
    
    // 后续获取数据的代码写在这里
}

问题2：选择器错误（找不到td.email元素） #

看你的HTML表格，用户邮箱列的td类名是userName：

<td class="userName"><?= $user['username']?></td>

但你的JS代码里用了querySelector('td.email')，这个选择器找不到任何元素，会返回null，当你尝试读取null.innerHTML时就会抛出TypeError。

解决方案：
把选择器改成td.userName，和HTML里的类名保持一致。

修改后的完整事件监听代码示例 #

this.registerEvents = function(){
    document.addEventListener('click', function(e){
        const targetElement = e.target;

        // 保留原有的删除逻辑（已优化事件目标判断）
        if(targetElement.closest('.deleteUser')) {
            e.preventDefault();
            const deleteLink = targetElement.closest('.deleteUser');
            const userid = deleteLink.dataset.userid;
            const fname = deleteLink.dataset.fname;
            const lname = deleteLink.dataset.lname;
            const fullname = fname + ' ' + lname;

            if (window.confirm('Are You Sure To Delete '+ fullname +'?')) {
                $.ajax({
                    method: 'POST',
                    data: {
                        user_id: userid,
                        f_name: fname,
                        l_name: lname
                    },
                    url: 'database/delete-user.php',
                    dataType: 'json',
                    success: function(data){
                        if(data.success) {
                            if(window.confirm(data.message)){
                                location.reload();
                            }
                        } else {
                            window.alert(data.message);
                        }
                    }
                })
            } else {
                console.log('will not delete');
            }
        }

        // 修正后的编辑逻辑
        if(targetElement.closest('.updateUser')){
            e.preventDefault();
            const updateLink = targetElement.closest('.updateUser');
            const userId = updateLink.dataset.userid;
            const row = updateLink.closest('tr');
            
            const firstName = row.querySelector('td.firstName').innerHTML;
            const lastName = row.querySelector('td.lastName').innerHTML;
            const userName = row.querySelector('td.userName').innerHTML;

            // 这里可以把数据填充到左侧的表单中，比如：
            document.getElementById('first_name').value = firstName;
            document.getElementById('last_name').value = lastName;
            document.getElementById('email').value = userName;
            // 建议添加隐藏输入框存储用户ID，方便后续提交更新请求
            // 比如在表单里加：<input type="hidden" id="edit_user_id" name="user_id">
            // document.getElementById('edit_user_id').value = userId;
        }
    });
}

额外小建议 #

1. 给左侧的用户表单添加一个隐藏输入框，用来存储要编辑的用户ID，这样提交更新请求时可以把ID一起传给后端。
2. 可以根据是否存在编辑ID，动态切换表单的提交按钮文本（比如从“Add User”改成“Update User”）和提交地址。

备注：内容来源于stack exchange，提问作者melio.achour