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

Question

我正在使用 JavaScript 动态构建一个表，并且需要在第一个 HTML 表格中嵌套另一个表，该表将是 jQuery 数据表。

我有我认为可行的方法，经过研究，我不明白为什么它不起作用。我正在定义我的第一个表，构建标题，然后添加行。在单元格内部，我构建了将成为数据表的表。

使用console.log，它看起来构建正确，但显示不正确。相反，它仅显示第一个表，然后看起来好像它不在表中，而只是随意放置在页面上。这是我的代码。如果有人会查看它并看看他们是否发现它有问题，我将不胜感激。

顺便说一句，我认为这不会有任何区别，但我的 openDetailRow 函数基于来自现有数据表中的行的点击。

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

这个问题是因为我使用了display:none而引起的。现在事情是这样的..如果您不使用特定的样式属性，那么该表格将显示在页面上。但是，由于它嵌套在我的第一个表中，并且第一个表已应用了 display:none 样式属性，那么通过将其应用于第二个表，它将不允许该表显示在页面上。 至于倾斜的外观，我没有设置 colspan。所以现在，它运行得很好。我注释掉了 display none 并添加了这一行代码...

bdyTbl.setAttribute("colspan", 4);