Estoy usando el complemento DataTables para crear dinámicamente tablas con filas secundarias expandibles. Un objeto vars contiene todas las tablas generadas. El problema que tengo es que las filas secundarias de las tablas solo se expanden para la última tabla que se genera. Al intentar expandir las filas secundarias de las tablas anteriores, no sucede nada.

var row = x.row(tr); solo devuelve una fila cuando se expande una fila secundaria para la última tabla que se genera. Para las tablas anteriores que se generan, devuelve una matriz vacía y las filas secundarias no se expanden.

Código para generar tablas:

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

Código para expandir filas secundarias:

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