如何使用JavaScript或jQuery获取表格中点击按钮所在行的全部数据

你的代码存在几个关键问题：手动拼接表格DOM后再初始化DataTables，导致组件无法正确关联行数据；重复设置相同id（多个tr和td用studentCell），违反HTML id唯一性规则；冗余的DOM查询逻辑也增加了出错概率。

下面是优化后的完整实现，直接利用DataTables的API管理数据并获取点击行信息：

function StudentList(TestID) {
    var CenterID = $('#ddlCenter').val();
    var SectorID = $('#ddlSector').val();
    var SubjectID = $('#ddlSubject').val();

    var jsObject = {
        CenterID: CenterID,
        SectorID: SectorID,
        SubjectID: SubjectID,
        TestID: TestID
    };

    $.ajax({
        type: "POST",
        url: "../ResetExam/GetStudentList/",
        data: JSON.stringify(jsObject),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            // 销毁旧的DataTables实例并清空表格
            if ($.fn.DataTable.isDataTable('#tblReset')) {
                $('#tblReset').DataTable().destroy();
            }
            $('#tblReset tbody').empty();

            // 初始化DataTables，直接绑定接口返回的数据
            var table = $('#tblReset').DataTable({
                "aaSorting": [],
                dom: 'Bfrtip',
                data: response, // 直接传入接口返回的数组
                buttons: [
                    {
                        extend: 'excel',
                        title: 'IEBT Export',
                        exportOptions: {
                            columns: [2, 3, 4, 5, 6, 7, 8] // 调整列索引，对应显示的列
                        }
                    }
                ],
                columns: [
                    // 隐藏的Studentid列
                    { 
                        data: 'Studentid',
                        visible: false 
                    },
                    // 隐藏的Testid列
                    { 
                        data: 'Testid',
                        visible: false 
                    },
                    { data: 'Name' },
                    { data: 'Surname' },
                    { data: 'ExamNo' },
                    { data: 'IDNumber' }, // 修正原代码重复使用Studentid的错误
                    { data: 'TestName' },
                    { data: 'Description' },
                    { data: 'TimeRemaining' },
                    { data: 'EndDate' },
                    // 操作按钮列
                    {
                        data: null,
                        defaultContent: '<button type="button" class="btn btn-block btn-primary glow" style="width:100px">Reset</button>'
                    }
                ]
            });

            // 绑定按钮点击事件
            $('#tblReset tbody').on('click', 'td button', function () {
                // 获取当前按钮所在的行
                var currentRow = $(this).closest('tr');
                // 通过DataTables API获取行数据
                var rowData = table.row(currentRow).data();
                
                // 提取Studentid作为参数传递
                var studentId = rowData.Studentid;
                
                // 根据输入框值判断调用对应方法
                if ($('#txttime').val().trim() === "") {
                    Reset(studentId);
                } else {
                    UpdateTime(studentId);
                }
            });
        }
    });

    return false;
}

关键改进点： #

• 移除手动DOM拼接：直接将接口返回的response传给DataTables的data选项，由组件自动渲染表格行，确保数据与DOM正确关联。
• 修正列配置错误：原代码里重复使用Studentid作为列数据，现在修正为对应IDNumber列；隐藏列用visible: false替代inline样式，更符合DataTables规范。
• 简化行数据获取逻辑：点击按钮时，通过table.row(currentRow).data()直接获取完整行数据，无需额外DOM查询，逻辑简洁可靠。
• 删除无效id设置：移除重复设置studentCell id的代码，避免HTML id唯一性冲突。

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