遍历jqGrid时点击行按钮获取对应行ID的问题

安全阿岳

2026-8-8

解决jqGrid点击行操作按钮获取当前行ID的问题

问题根源

$("#rangemaster").children("tr.jqgrow") 仅查找#rangemaster的直接子元素，但jqGrid的行(tr.jqgrow)实际嵌套在<tbody>标签内，并非表格的直接子元素，因此直接调用children无法定位到目标行，导致attr("id")返回undefined。此外，该写法会获取所有符合条件的行，而非当前点击按钮所在的特定行。

可行解决方案

方法1：通过点击按钮定位当前行

针对行内操作按钮的点击场景，先定位按钮所属的行，再获取ID：

// 假设操作按钮的类名为 .row-action-btn
$(".row-action-btn").on("click", function() {
    // 向上查找最近的tr.jqgrow行元素
    var currentRow = $(this).closest("tr.jqgrow");
    // 获取行ID
    var rowId = currentRow.attr("id");
    // 可选：用jqGrid内置方法获取整行数据
    var rowData = $("#rangemaster").jqGrid("getRowData", rowId);
    console.log("当前行ID：", rowId);
    console.log("当前行数据：", rowData);
});

方法2：正确遍历所有行

若需遍历表格所有行，需先定位到tbody再查找行元素：

$("#rangemaster").find("tbody tr.jqgrow").each(function() {
    var rowId = $(this).attr("id");
    console.log("行ID：", rowId);
});

方法3：利用jqGrid内置事件

如果是点击行本身触发操作，可直接使用jqGrid的onSelectRow事件：

$("#rangemaster").jqGrid({
    // 其他配置项
    onSelectRow: function(rowId) {
        var rowData = $(this).jqGrid("getRowData", rowId);
        console.log("选中行ID：", rowId);
        console.log("选中行数据：", rowData);
    }
});