javascript - 动态创建多个DataTable时无法展开子行

Question

我正在使用 DataTables 插件来动态创建具有可扩展子行的表。一个vars对象包含所有生成的表。我遇到的问题是表子行仅扩展生成的最后一个表。尝试扩展先前表的子行时，没有任何反应。

var row = x.row(tr);仅在为生成的最后一个表扩展子行时返回一行。对于之前生成的表，它返回一个空数组，并且子行不展开。

生成表格的代码：

vars = {};

for (var i = 0; i < shapes.length; i++) {

            var shapeType = shapes[i].points.length == 1 ? "Point" : "Line";

            document.getElementById("addCoordsScreen").innerHTML += '<div class="coordTableHeader">Shape(' + shapeType + '):</div><table id="coordinateTable' + i + '" class="display" style="width: 100%"></table><br/>';

            window.vars['tableName' + i] = $("#coordinateTable" + i).DataTable({
                data: dataSet,
                ordering: false,
                paging: false,
                searching: false,
                bInfo: false,
                columns: [
                    {
                        render: function (data, type, row) {
                            return "<span title='Add coordinates' class='fa fa-plus plusSymbol')'/>";
                        }
                    },
                    { title: "COLUMN1" },
                    { title: "COLUMN2" },
                    {
                        render: function (data, type, row) {
                            return "<span id='" + data[3] + "' class='fa fa-window-close fa-lg removeEN')'/>";
                        }
                    }
                ]
            }).draw();
        }

扩展子行的代码：

$(document).on('click', ".plusSymbol", function () {
        $(this).closest('tr').find("span").toggleClass('fa-plus fa-minus');


        var tr = $(this).closest('tr');
        var tableId = $(this).closest('table').attr('id');
        tableId = tableId.split("coordinateTable")[1];
        var x = vars['tableName' + tableId];
        var row = x.row(tr);

        if (row.child.isShown()) {
            row.child.hide();
        }
        else {
            row.child(getChildRow(row.data())).show();
        }
    });

标签： javascriptjquerydatatabledatatables