如何将嵌套数据表添加到HTML表

Question

I am building a table dynamically with JavaScript, and I need to nest another table which will be a jQuery datatable inside the first table which is HTML.

I have what I thought would work and after researching, I don't see why it isn't working. I am defining my first table, building out the header and then adding rows. Inside of a cell, I build the table that will be the datatable.

Using console.log, it looks to be built correctly, but it doesn't display correctly. Instead, it shows only the first table and then appears as if it is not in a table, but rather just haphazardly placed on the page. Here is my code. I would greatly appreciate it if someone will look at it and see if they see a problem with it.

By the way, I don't think it would make any difference, but my openDetailRow function is based on a click coming from a row in an existing datatable.

function openDetailRow() {
  $("#gridTbl tr td:nth-child(1)").on("click",
    function () {
      var ndx = $(this).closest('tr').find('td:eq(0)').text();
      var dataRow = reportApp.grid.fnGetData(this.parentNode);
      addElements(dataRow);
    });
  }

  function getDetails() {
    $("#hdrTbl").dialog({
      resizable: false,
      modal: true,
      title: "Order Details",
      height: 250,
      width: 700,
      buttons: {
        "Close": function () {
          $(this).dialog('destroy');
          $(this).remove();
          $("#ordDiv").remove();
        }
      }
    });
  }

  function buildHdrTable(dataRow){
    var hdrDets = [];
    hdrDets[0] = dataRow.ordnbr;
    hdrDets[1] = dataRow.custordnbr;
    hdrDets[2] = dataRow.carrier;
    hdrDets[3] = dataRow.custid;
    var rowDets = [];
    dataRow.detail.forEach(
      function (el) {
        var rowAr = [];
        rowAr[0] = el.invtid;
        rowAr[1] = el.descr;
        rowAr[2] = el.pcs;
        rowAr[3] = el.status;
        rowDets.push(rowAr);
      });

      hdrTbl = document.createElement('table');
      hdrTbl.cellPadding = 5;
      hdrTbl.style.width = '750px';
      hdrTbl.style.display = 'none';
      hdrTbl.setAttribute("id", "hdrTbl");
      var hdrVals = ["Ord #", "Cust Ord #", "Ship Via", "Cust ID" ];
      var tblHead = document.createElement('thead');
      hdrTbl.appendChild(tblHead);
      tblHeadRow = document.createElement("tr");
      tblHead.appendChild(tblHeadRow);
      for(var i =0; i < hdrVals.length; i++){
        tblHeadRow.appendChild(document.createElement("th")).
        appendChild(document.createTextNode(hdrVals[i]));
      }
      var hdrBody = document.createElement("tbody");
      hdrTbl.appendChild(hdrBody);
      var tr = hdrBody.insertRow();
      var td1 = tr.insertCell();
      var td2 = tr.insertCell();
      var td3 = tr.insertCell();
      var td4 = tr.insertCell();

      td1.appendChild(document.createTextNode(hdrDets[0]));
      td2.appendChild(document.createTextNode(hdrDets[1]));
      td3.appendChild(document.createTextNode(hdrDets[2]));
      td4.appendChild(document.createTextNode(hdrDets[3]));
      var bdy = hdrBody.insertRow();
      var bdyTbl = bdy.insertCell();
      tbl = document.createElement('table');
      tbl.style.width = '100%';
      tbl.style.display = 'none';
      //tbl.style.border = "1px solid black";
      tbl.setAttribute("id", "ordertable");

      var headVals = ["Inventory Number", "Description", "Number of Pieces", "Status"];
      var thead = document.createElement('thead');
      tbl.appendChild(thead);
      var theadRow = document.createElement("tr");
      thead.appendChild(theadRow);
      for (var i = 0; i < headVals.length; i++) {
        theadRow.appendChild(document.createElement("th"))
                .appendChild(document.createTextNode(headVals[i]));
      }
      var tbody = document.createElement("tbody");
      tbl.appendChild(tbody);
      for (var i = 0; i < rowDets.length; i++) {
        var tr = tbody.insertRow();
        var td1 = tr.insertCell();
        var td2 = tr.insertCell();
        var td3 = tr.insertCell();
        var td4 = tr.insertCell();

        td1.appendChild(document.createTextNode(rowDets[i][0]));
        td2.appendChild(document.createTextNode(rowDets[i][1]));
        td3.appendChild(document.createTextNode(rowDets[i][2]));
        td4.appendChild(document.createTextNode(rowDets[i][3]));
        bdyTbl.appendChild(tbl);
      }

      return hdrTbl;
    }

    function addElements(dataRow) {
      var body = document.body;
      var hdrTbl = buildHdrTable(dataRow);
      ordDiv = document.createElement("div");
      ordDiv.appendChild(hdrTbl);
      ordDiv.setAttribute("id", "ordDiv");

      body.appendChild(ordDiv);

      $("#ordertable").css('display', 'none');

      $("#ordertable").dataTable(tbl);
      getDetails();
      console.log(hdrTbl);
    }

Answer 1

The issue was caused because I was using display:none. Now here is the thing.. If you don't use that particular style attribute, then the table will show up on the page. However, since it is nested inside my first table, and the first table has the display:none style attribute already applied to it, then by applying it to the second table, it would not allow that table to be shown on page. As for the skewed look, I had not set a colspan. So now, it is working perfectly. I commented out the display none and added this one line of code...

bdyTbl.setAttribute("colspan", 4);