Как я могу получить идентификатор строки в нескольких таблицах с помощью jquery?

Question

У меня есть несколько таблиц на HTML-странице, я использую плагин Datatables jquery.

Я получаю идентификатор строки из таблицы с кодом ниже и вставляю его в скрытую форму с помощью js-плагина "AutoFill".

        $(document).ready(function() {
            var table = $('#dt_basic1').DataTable({
                'columnDefs': [
                    {
                        'targets': 3,
                        'checkboxes': {
                            'selectRow': true
                        }
                    }
                ],
                'select': {
                    'style': 'multi'
                }
            });
            $('#dt_basic1 tbody').on('click',
                'tr',
                function() {
                    $(this).toggleClass('selected');
                });
            var data = {};
            var a1 = [];
            $('#BtnClick').click(function() {
                var a = table.rows('.selected').data();
                $.each(a,
                    function (index, value) {
                        a1.push(value[4]);
                    });
                data["BreakFast"] = a1.toString();
                $("#hiddenForm").autofill(data);
                a1 = [];
                data = {};
            });
        });

Теперь мне нужна идея для получения других идентификаторов строк таблицы отдельно без дублирующего кода. Мой первый идентификатор таблицы - "# dt_basic1". Код обновлен:

        var datasets={};
        $(document).ready(function() {
            var table = $('.register-id').DataTable({
                'columnDefs': [
                    {
                        'targets': 3,
                        'render': function (data, type, row, meta) {
                            if (type === 'display') {
                                data = '<input type="checkbox" class="dt-checkboxes" name="' + $('td').closest('table').attr("name") + '">';
                            }

                            return data;
                        },
                        'checkboxes': {
                            'selectRow': true,
                            'selectAllRender': '<input type="checkbox" class="dt-checkboxes" name="' + $('td').closest('table').attr("name") + '">'
                            //'selectAllRender': '<input type="checkbox" class="dt-checkboxes" name="'+$this.attrib("name") +'">'

                        }
                    }
                ],
                'select': {
                    'style': 'multi'
                }
            });
            $('#dt_basic1 tbody').on('click',
                'tr',
                function() {
                    $(this).toggleClass('selected');

                    var catName = $('tr').closest('table').attr("name");
                    datasets[catName] = {
                        label: catName,
                        data: []
                    };
                    console.log(datasets);
                });
            var catName = "";
            $('#BtnClick').click(function() {
                var a = table.rows('.selected').data();
                $.each(a,
                    function (index, value) {
                        catName = table.name;
                        datasets[catName].data.push(value[4]);
                    });
                console.log(datasets);
                $("#hiddenForm").autofill(datasets);
                datasets = {};
            });
        });

Теперь я могу получить все данные таблицы, но когда я нажимаю кнопку, которая определила в коде jquery, все выбранные идентификаторы строк из всех таблиц сохраняются в 1 месте памяти. Мне нужно сохранить их в правильном месте по атрибуту имени таблицы в datasets объект.

Мне нужно получить этот результат:

Dataset{
tbl1 : 1,2,5
tbl2 : 10,40,2
tbl3 : 2,8,7
}

Answer 1

Вы можете назначить класс register-id для всех своих таблиц и изменить свой селектор на:

   $(document).ready(function() {
        $('.register-id').on('click',
            'tr',
            function() {
                $(this).toggleClass('selected');
            });
        var data = {};
        var a1 = [];
        $('#BtnClick').click(function() {
            var a = table.rows('.selected').data();
            $.each(a,
                function (index, value) {
                    a1.push(value[4]);
                });
            data["BreakFast"] = a1.toString();
            $("#hiddenForm").autofill(data);
            a1 = [];
            data = {};
        });
    });

это будет выполнять foreach для таблиц, в которых будет определяться onclick

редактировать :

вы можете получить доступ к родительскому идентификатору, используя $(this).parent().attr('id');, если нужно, вы можете добавить его в цепочку $(this).parent().parent().attr('id');, тогда я рекомендую не использовать автозаполнение и вставить ваши данные в ваш набор данных с ключевым ($(this).parent().parent().attr('id');) значением