title: Detail row in multiple nested tables doesn't work
body: <p>I use <a href="https://www.datatables.net/" rel="nofollow noreferrer">DataTables</a> jQuery plugin to create nested independent tables. In <a href="https://stackoverflow.com/questions/11841486/datatables-drill-down-rows-with-nested-independent-table">this</a> post I found how I can create a nested table. When I want to create nested table in nested table I get error in line <code>parentTable.fnOpen(this, tableAsJQueryNode, 'details');</code></p>
  
  <pre><code>Uncaught TypeError: Cannot read property '0' of undefined
  </code></pre>
  
  <p><a href="http://jsfiddle.net/qtynfu5a/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;body&gt;&lt;div id="example"&gt;&lt;/div&gt;&lt;body&gt;
  </code></pre>
  
  <p><strong>javascript code with sample data</strong></p>
  
  <pre><code>var dataInJson = [
      {
           "data" : {
                           "name" : "b1",
                           "street": "s1",
                           "city": "c1",
                           "departments": 10,
                           "offices": 15
           },
           "kids" : [
                           {
                                 "data": {
                                                "department" : "HR",
                                                "supervisor" : "Isidor Bristol",
                                                "floor" : 1,
                                                "employees": 15
                                 },
                                 "kids" : [ 
                                           {
                                                 "data": {
                                                                "name" : "Klement Nikodemos",
                                                                "phone" : "+938462",
                                                                "hire_date" : "January 1, 2010",
                                                                "id": 3456
                                                 },
                                                 "kids" : [ ]
                                           },
                                           {
                                                 "data": {
                                                                "name" : "Madhava Helmuth",
                                                                "phone" : "+348902",
                                                                "hire_date" : "May 23, 2002",
                                                                "id": 1234
                                                 },
                                                 "kids" : [ ]
                                           },
                                           {
                                                 "data": {
                                                                "name" : "Andria Jesse",
                                                                "phone" : "456123",
                                                                "hire_date" : "October 23, 2011",
                                                                "id": 9821
                                                 },
                                                 "kids" : [ ]
                                           }
  
                                  ]
                           },
                           {
                                 "data": {
                                                "department" : "development",
                                                "supervisor" : "Jim Linwood",
                                                "floor" : 2,
                                                "employees": 18
                                 },
                                 "kids" : [ 
                                           {
                                                 "data": {
                                                                "name" : "Origenes Maxwell",
                                                                "phone" : "345892",
                                                                "hire_date" : "February 1, 2004",
                                                                "id": 6234
                                                 },
                                                 "kids" : [ ]
                                           }
  
                                  ]
                           },
                           {
                                  "data": {
                                                "department" : "testing",
                                                "supervisor" : "Zekeriya Seok",
                                                "floor" : 4,
                                                "employees": 11
                                 },
                                 "kids" : []
  
                           }
           ]
      },
      {
            "data" : {
                           "name" : "b2",
                           "street": "s10",
                           "city": "c2",
                           "departments": 3,
                           "offices": 10
           },
           "kids" : [
                           {
                                 "data": {
                                                "department" : "development",
                                                "supervisor" : "Gallagher Howie",
                                                "floor" : 8,
                                                "employees": 24
                                 },
                                 "kids" : [ 
                                           {
                                                 "data": {
                                                              "name" : "Wat Dakota"
                                                 },
                                                 "kids" : [ ]
                                           }
  
                                  ]
                           },
                           {
                                  "data": {
                                                "department" : "testing",
                                                "supervisor" : "Shirley Gayle",
                                                "floor" : 4,
                                                "employees": 11
                                 },
                                 "kids" : []
  
                           }
           ]
  
        },
      {
          "data" : {
                           "name" : "b3",
                           "street": "s3",
                           "city": "c3",
                           "departments": 2,
                           "offices": 1
           },
           "kids" : [
                           {
                                 "data": {
                                                "department" : "development"
                                 },
                                 "kids" : [ 
                                           {
                                                 "data": {
                                                              "name" : "Wat Dakota"
                                                 },
                                                 "kids" : [ ]
                                           }
  
                                  ]
                           },
                           {
  
                           }
           ]
      },
  
  {
          "data" : {
                           "name" : "b4",
                           "city": "c4"
           },
           "kids" : []
      }
  
  ];
  
  
  function buildTable(idOfTableParentElement, tableDataInJson){
  
    var deepCopyOfData = JSON.parse(JSON.stringify(tableDataInJson));
  
    var countRowOccurence = (idOfTableParentElement.match(/row/g) || []).length;
    var table_id = 0;
    var tableIdString = "";
    if (countRowOccurence &gt; 0){
  
      var rowIds = new Array();
  
      var copyIdOfTableParentElement = idOfTableParentElement
      for (var i = countRowOccurence; i &gt; 0; i--){
          var firstIndexOfTabPosition = copyIdOfTableParentElement.indexOf("tab_") + "tab_".length;
          copyIdOfTableParentElement = copyIdOfTableParentElement.substring(firstIndexOfTabPosition, copyIdOfTableParentElement.length);
          var rowPosition = copyIdOfTableParentElement.indexOf("row_") + "row_".length;
          copyIdOfTableParentElement = copyIdOfTableParentElement.substring(rowPosition, copyIdOfTableParentElement.length);
          var rowId = "";
          if (copyIdOfTableParentElement.indexOf("tab_") != -1)
            rowId = copyIdOfTableParentElement.substring(0, copyIdOfTableParentElement.indexOf("tab_"));
          else
            rowId = copyIdOfTableParentElement.substring(0, copyIdOfTableParentElement.length);
  
          rowIds.push(parseInt(rowId));
      }
  
      rowIds.forEach(function(hierarchyPosition) {
        deepCopyOfData = JSON.parse(JSON.stringify(deepCopyOfData[hierarchyPosition].kids));
      });
  
      table_id = idOfTableParentElement;
      tableIdString = idOfTableParentElement + "_tab_" + countRowOccurence.toString();
    } else {
      tableIdString = "tab_" + countRowOccurence.toString();
    }
  
    var tableInHtml = "&lt;table id=\"" + tableIdString + "\"&gt;";
    tableInHtml += buildTableContent(tableIdString, deepCopyOfData);
    tableInHtml += "&lt;/table&gt;"; 
  
  var a = $('#exampleTable tbody tr');
  
    return tableInHtml;
  }
  
  function buildTableContent(tableIdString, tableDataInJson){
    // find data with max number of proerties
    var positionOfDataWithMaxProperties = 0;
    var maxNumberOfProperties = 0;
    for (var i = 0; i &lt; tableDataInJson.length; i++) {
        if (typeof(tableDataInJson[i].data) !== 'undefined'){
            if (Object.keys(tableDataInJson[i].data).length &gt; maxNumberOfProperties){
              maxNumberOfProperties = Object.keys(tableDataInJson[i].data).length;
              positionOfDataWithMaxProperties = i;
            }
        }
    }
  
    // create array of properties
    var properties = new Array();
    Object.keys(tableDataInJson[positionOfDataWithMaxProperties].data).forEach(function (key) {
       properties.push(key);
    });
  
    // create header of table
    var TableMainHeader = "&lt;thead&gt;&lt;tr&gt;";
    for (var i = 0; i &lt; tableDataInJson.length; i++) {
        if (typeof(tableDataInJson[i].kids) !== 'undefined' &amp;&amp; tableDataInJson[i].kids.length &gt; 0){
          TableMainHeader += "&lt;th&gt;&lt;/th&gt;";
          break;
        }
    }
    properties.forEach(function (property) {
       TableMainHeader += "&lt;th&gt;" + property + "&lt;/th&gt;";
    });
    TableMainHeader += "&lt;/tr&gt;&lt;/thead&gt;";
  
    // create body of table
    var TableMainBody = "&lt;tbody&gt;";
    for (var i = 0; i &lt; tableDataInJson.length; i++) {
  
      if (typeof(tableDataInJson[i].data) !== 'undefined'){
  
        TableMainBody += "&lt;tr id=\"" + tableIdString + "_row_" + parseInt(i) + "\" &gt;";
  
        if (TableMainHeader.indexOf("&lt;th&gt;&lt;/th&gt;") != -1){
          if (tableDataInJson[i].kids.length &gt; 0)
            TableMainBody += "&lt;td&gt;&lt;img src=\"http://blog.picol.org/wp-content/themes/icon_blog/images/css_images/arrow_right_16.png\"&gt;&lt;/td&gt;";
          else
            TableMainBody += "&lt;td&gt;&lt;/td&gt;";
        }
  
        properties.forEach(function (property) {
            if (Object.keys(tableDataInJson[i].data).indexOf(property) === -1)
              TableMainBody += "&lt;td&gt;&lt;/td&gt;";
            else
              TableMainBody += "&lt;td&gt;" + tableDataInJson[i].data[property] + "&lt;/td&gt;";
        });
  
        TableMainBody += "&lt;/tr&gt;";
  
      }
  
    };
    TableMainBody += "&lt;/tbody&gt;";
  
    return TableMainHeader + TableMainBody;
  }
  
  //Run On HTML Build
  $(document).ready(function () {
  
          var divElement = $("#example").append(buildTable("example", dataInJson));
  
          var tables = new Array();
  
          //Initialse DataTables, with no sorting on the 'details' column
          var table = divElement.children().first().dataTable({
              "bPaginate": false,
              "bLengthChange": false,
              "bFilter": false,
              "bSort": false,
              "bInfo": false,
              "bAutoWidth": false,
          });
  
          tables.push([divElement.children().first().children().first().attr("id"), table]);
  
          $(document).on('click', '#example tbody tr' , function() {
  
              var parentTable = new Object();
  
              var parentTableId = $(this).parent().parent().attr("id");
  
              if (tables.some(function(a){return a[0] === parentTableId})){
                for (var i = 0; i &lt; tables.length; i++){
                    if (tables[i][0] === $(this).parent().parent().attr("id")){
                      parentTable = tables[i][4];
                      break;
                    }
                }; 
              }
  
              if (parentTable.fnIsOpen($(this))) {
                  /* This row is already open - close it */
                  parentTable.fnClose($(this));
              }
              else {
                if ($(this).children().first().children().first().is("img")){
                  /* Open this row */
  
                  var tableInString = buildTable($(this).attr("id"), dataInJson);
  
                  var tableAsJQueryNode = $('&lt;div/&gt;').html(tableInString).contents();
  
                  parentTable.fnOpen(this, tableAsJQueryNode, 'details');
                  var newtable = $(tableAsJQueryNode.attr("id")).dataTable({
                      "bPaginate": false,
                      "bLengthChange": false,
                      "bFilter": false,
                      "bSort": false,
                      "bInfo": false,
                      "bAutoWidth": false
                  });
  
                  if (tables.some(function(a){return a[0] !== tableAsJQueryNode.attr("id")})){
                      tables.push([tableAsJQueryNode.attr("id"), newtable]);
                  }
                }
              }
          });
  
  });
  </code></pre>
  
  <p>I found a <a href="https://datatables.net/forums/discussion/23433/details-row-for-multiple-tables-dosen-t-work" rel="nofollow noreferrer">thread</a> with the same problem, but there is no solution.</p>
  
  <p>If you click on row in nested table, you get the error:</p>
  
  <p><img src="https://i.stack.imgur.com/RMfG9.png" alt="enter image description here"></p>