JavaScript/HTML中如何实现点击表格行触发函数并获取单元格内容

核心故障原因 #

• 事件绑定逻辑错误：你写的row.onclick = cellClicked("Test");是直接调用cellClicked函数并将返回值赋值给点击事件，而非将函数本身绑定为点击回调，因此渲染行时函数就直接执行了，点击时无响应。
• AJAX语法错误：success回调结束和error回调定义之间缺少逗号，会触发语法异常，导致后续逻辑无法正常执行。

修正后的实现代码 #

首先修改事件绑定逻辑，同时补充回调内获取当前行单元格内容的能力：

function searchUsers() {
    var searchText = document.getElementById('searchInput').value;

    $.ajax({
        url: "https://downstreamaudio.com/SearchUsers.php",
        method: 'POST',
        data: {searchQuery: searchText},
        dataType: "json",
        success: function (result) {
            console.log(result);
            console.log(result.length);

            var table = document.getElementById("userSearchTableId");
            table.style.height = (result.length * 80 + "px");
            while(table.rows.length > 0) {
                table.deleteRow(0);
            }
            table.style.border = "0px solid black";
            table.style.borderCollapse = "separate"; // 原拼写错误修正

            for (var i = 0; i < result.length; i++) {
                document.querySelector('.userSearchTable').style.opacity = "1";
                var username = result[i].username;
                table.style.border = "4px solid black";

                var row = table.insertRow(0);
                // 修复事件绑定：用匿名函数包裹触发逻辑，绑定函数引用而非直接执行
                row.onclick = function() {
                    // 这里的this就是当前被点击的行元素
                    cellClicked(this);
                };

                var cell1 = row.insertCell(0);
                cell1.style.width = "80px";
                cell1.style.height = "50px";
                cell1.setAttribute("class", "UserImage");

                var image = document.createElement("img");
                image.height = "50";
                image.width = "50";
                image.style.backgroundColor = "green";
                image.style.margin = "15px 15px 15px 12px";
                image.style.padding = "0px";
                image.style.borderRadius = "25px";
                image.style.border = "2px solid black";
                cell1.appendChild(image);

                var cell2 = row.insertCell(1);
                cell2.style.fontSize = "20px";
                cell2.style.fontFamily = "Arial, Helvetica, sans-serif";
                cell2.style.fontWeight = "600";
                cell2.innerHTML = username;
            }
        }, // 这里补充了缺失的逗号
        error: function (jqxhr, status, exception) {
            alert(status);
        }
    });
}

// 点击行的处理函数
function cellClicked(row) {
    // 获取第二列的用户名内容，索引从0开始，第二列索引是1
    var targetUsername = row.cells[1].innerHTML;
    console.log("点击的用户名为：", targetUsername);
    // 这里补充你需要的业务逻辑即可
}

补充说明 #

如果需要传递更多用户相关信息（比如用户ID），可以直接在创建行时通过自定义属性挂载到行元素上，示例：

// 循环内创建行的时候添加自定义属性
row.dataset.userId = result[i].id;
// 点击时获取
var userId = row.dataset.userId;

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