如何在点击jQuery DataTable删除按钮时获取对应行的ID

你所有删除按钮都用了同一个id="deletebtn"，而HTML规范中ID必须是唯一的。当你用$("#deletebtn").val()时，jQuery只会选取页面中第一个匹配该ID的元素，所以不管点击哪一行的按钮，拿到的都是第一行的ID。

方法一：改用类选择器并通过$(this)获取当前按钮 #

把按钮的id替换成class，点击事件里用$(this)指代当前被点击的按钮，就能精准拿到对应行的stock_id：

修改后的代码：

var table = $('#table1').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url : "http://localhost/cokeinventory/rest-api/api-search-stockin.php",
            dataSrc: "doc",
        },
        columns: [
            { data: 'stock_id'},
            { data: 'item_name'},
            { data: 'unit' },
            { data: 'stockin_qty' },
            { data: 'barcode_number' },
            { data: 'barcode_label' },
            { data: 'balquantity' },
            {
                data: null,
                className: "dt-center editor-delete",
                orderable: false,
                "mRender" : function ( data, type, row ) {
                    // 将id改为class
                    return '<button class="btn btn-success deletebtn" value=' + data.stock_id +' >Delete <i class="fe fe-delete"></i></button>';
                }
            }

        ],
    });

// 选择器改为类，用$(this)获取当前按钮的值
$("body").on("click", ".deletebtn", function(){
    var val = $(this).val();
    alert(val);
});

方法二：利用DataTable的API获取行数据 #

如果想更贴合DataTable的用法，可以通过按钮所在的行直接获取完整行数据，不需要依赖按钮的value属性：

var table = $('#table1').DataTable( {
        // 保持原有配置不变，按钮可去掉value属性
        columns: [
            // ...其他列配置
            {
                data: null,
                className: "dt-center editor-delete",
                orderable: false,
                "mRender" : function ( data, type, row ) {
                    return '<button class="btn btn-success deletebtn" >Delete <i class="fe fe-delete"></i></button>';
                }
            }
        ],
    });

$("body").on("click", ".deletebtn", function(){
    // 获取当前按钮所在的DataTable行数据
    var row = table.row($(this).closest('tr')).data();
    var stockId = row.stock_id;
    alert(stockId);
});

这种方法更灵活，即使后续按钮结构调整，也能稳定获取行数据。

内容的提问来源于stack exchange，提问作者Smitty's