我如何使用jQuery获取多个表中的行ID?

时间:2019-06-10 15:16:54

标签: jquery datatables

我在HTML页面中有多个表,我使用Datatables jquery插件。

我从具有以下代码的表中获取行ID,并使用“自动填充” js插件将其插入隐藏表单中。

        $(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 = {};
            });
        });

现在我需要一个主意,以获取没有重复代码的其他表行ID。我的第一个表ID是“#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代码中定义的按钮时,所有表中的所有选定行id都保存在1个存储位置中。我需要通过{中的表名属性将它们保存在正确的位置{1}}个对象。

我需要得到这个结果:

datasets

1 个答案:

答案 0 :(得分:0)

您可以将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 = {};
        });
    });

这将在将定义onclick的表上执行foreach

修改

您可以使用$(this).parent().attr('id');访问父ID,也可以在需要时$(this).parent().parent().attr('id');像这样链接它,然后建议您不要使用自动填充功能,并使用键($(this).parent().parent().attr('id');)将数据推送到数据集中值

相关问题