jQuery DataTable中内嵌按钮点击无法获取所在行TD值的问题

看起来你遇到的问题是动态生成的按钮能触发函数，但无法正确定位到所在行的TD元素，返回undefined。这通常是因为获取DOM元素的方式有误，或者没有正确传递上下文。下面给你几种可行的解决方案：

方案1：直接传递行数据（最简便） #

既然你在循环response数据生成表格时已经拿到了每一行的完整数据，完全可以在生成按钮时直接把需要的值作为参数传给showmsg()函数，不用事后再去DOM里查找：

function fillServicesGrid() {
    var url = '@Url.Action("GetServices")';
    $.get(url, function (response) {
        $("#tblServices").html("");
        $.each(response, function (i, v) {
            // 假设你需要获取v中的ServiceId和ServiceName字段
            var btnHtml = `<button onclick="showmsg(${v.ServiceId}, '${v.ServiceName}')">EDIT</button>`;
            // 拼接当前行的HTML，把按钮放到对应的TD里
            var rowHtml = `<tr>
                <td>${v.ServiceId}</td>
                <td>${v.ServiceName}</td>
                <td>${btnHtml}</td>
            </tr>`;
            $("#tblServices").append(rowHtml);
        });
        // 如果是DataTable，记得重新初始化（如果之前初始化过）
        $('#tblServices').DataTable().destroy();
        $('#tblServices').DataTable();
    });
}

// 修改showmsg函数接收参数
function showmsg(serviceId, serviceName) {
    console.log("Service ID:", serviceId);
    console.log("Service Name:", serviceName);
    // 这里直接使用传递过来的值即可
}

方案2：通过DOM上下文获取行数据 #

如果你更倾向于通过DOM元素获取数据，需要在点击按钮时把当前按钮的DOM元素传递给函数，然后通过它定位到所在行：

function fillServicesGrid() {
    var url = '@Url.Action("GetServices")';
    $.get(url, function (response) {
        $("#tblServices").html("");
        $.each(response, function (i, v) {
            // 生成按钮时传递this（当前按钮元素）
            var btnHtml = '<button onclick="showmsg(this)">EDIT</button>';
            var rowHtml = `<tr>
                <td class="service-id">${v.ServiceId}</td>
                <td class="service-name">${v.ServiceName}</td>
                <td>${btnHtml}</td>
            </tr>`;
            $("#tblServices").append(rowHtml);
        });
        $('#tblServices').DataTable().destroy();
        $('#tblServices').DataTable();
    });
}

function showmsg(btn) {
    // 找到按钮所在的行（closest会向上查找最近的tr元素）
    var currentRow = $(btn).closest('tr');
    // 通过class获取指定TD的值（比用索引更可靠，避免列顺序变化）
    var serviceId = currentRow.find('.service-id').text();
    var serviceName = currentRow.find('.service-name').text();
    
    console.log("Service ID:", serviceId);
    console.log("Service Name:", serviceName);
}

方案3：使用jQuery DataTable官方API（推荐） #

既然你用的是jQuery DataTable，更推荐用它的原生API来处理动态按钮和行数据，这样更稳定，也符合组件的设计规范：

// 初始化DataTable（不用手动拼接HTML）
$(function() {
    $('#tblServices').DataTable({
        ajax: '@Url.Action("GetServices")',
        columns: [
            { data: 'ServiceId', className: 'service-id' },
            { data: 'ServiceName', className: 'service-name' },
            { 
                data: null,
                render: function(data, type, row) {
                    // 生成按钮，用class绑定事件，不用inline onclick
                    return '<button class="edit-btn">EDIT</button>';
                }
            }
        ]
    });

    // 用事件委托绑定按钮点击（动态生成的元素必须用委托）
    $('#tblServices').on('click', '.edit-btn', function() {
        // 获取当前行的DataTable数据对象
        var rowData = $('#tblServices').DataTable().row($(this).closest('tr')).data();
        // 调用showmsg并传递行数据
        showmsg(rowData);
    });
});

function showmsg(rowData) {
    console.log("Service ID:", rowData.ServiceId);
    console.log("Service Name:", rowData.ServiceName);
}

为什么之前会返回undefined？ #

大概率是你在showmsg()里用了错误的上下文：比如没有传递按钮元素，函数内的this指向的是window而不是按钮；或者用了parent()/parents()来查找行，但DOM结构嵌套导致找不到正确的tr元素，closest('tr')是更可靠的方式。

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