jquery 如何獲取數據表行的data-id值？

Question

我正在研究jquery datatable 。 我正在將用戶輸入數據添加到行中。

$('.add-row').on('click', function() {
            
            name = $('#name').val();
            email = $('#email').val();
            cno = $('#cno').val();
            bdy = $('#bday').val();
            t.row.add([
                name,
                email,
                cno,
                bdy,
                '<button class ="btn btn-danger del">Delete</button>' + '' + '<button class="btn btn-warning upd" data-id="'+$('#example').DataTable().rows().count()+'">Edit</button>'
            ]).draw(false);
            $("#name").val('');
            $("#email").val('');
            $("#cno").val('');
            $("#bday").val('');

        });

在上面的代碼中，我在其中添加了行數的data-id 。 現在我也在刪除該行。

 $("body").on("click", ".del", function() {

            if ($(row).hasClass('child')) {
                t.row($(row).prev('tr')).remove().draw();
            } else {
                t.row($(this).parents('tr')).remove().draw();
            }
        });

刪除行后。 行數為n-1 。 每當我嘗試添加新行時，我都想獲得最新的data-id值。 例如，我添加了 3 行，行數為 3，因此data-id為 3。所以我想獲取data-id的最后/最新值

任何幫助將不勝感激？

Answer 1

更新

我搜索最大數據ID，所以沒有重復的問題

正如@FilipKováč 所建議的那樣，如果您確定最后一行始終具有最大 ID，您可以嘗試： var max = parseInt($("button.upd").last().data("id") || 0); 而不是我的 map 線。它的性能更好

$('.add-row').on('click', function() {
            var values = $.map($("button.upd"), function(el, index) { return parseInt($(el).attr("data-id")); });
            var max = Math.max.apply(null, values.length == 0 ? [0] : values);

            name = $('#name').val();
            email = $('#email').val();
            cno = $('#cno').val();
            bdy = $('#bday').val();
            t.row.add([
                name,
                email,
                cno,
                bdy,
                '<button class ="btn btn-danger del">Delete</button>' + '' + '<button class="btn btn-warning upd" data-id="'+ (max + 1) +'">Edit</button>'
            ]).draw(false);
            $("#name").val('');
            $("#email").val('');
            $("#cno").val('');
            $("#bday").val('');

        });

 $("body").on("click", ".del", function() {
            if ($(row).hasClass('child')) {
                t.row($(row).prev('tr')).remove().draw();
            } else {
                t.row($(this).parents('tr')).remove().draw();
            }
        });

如果要重新索引數據 ID：

$("button.upd").each(function(index){
  $(this).attr("data-id", index);
}

您在刪除 function.. 中執行此操作，並將初始代碼保留在 Add function 中