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

时间:2015-06-30 17:40:05

标签: javascript jquery html datatable

我正在用JavaScript动态构建一个表,我需要嵌套另一个表,它将是第一个表格中的jQuery数据表,即HTML。

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

使用console.log,它看起来是正确构建的,但它无法正确显示。相反,它只显示第一个表,然后看起来好像它不在表中,而是只是偶然放在页面上。这是我的代码。如果有人看到它并看看它们是否有问题,我将不胜感激。

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

Enter image description here

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

This is what the dialog looks like when it loads. As you can see, it doesn't render the nested table at all and skews the first table all over the page.

1 个答案:

答案 0 :(得分:0)

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

bdyTbl.setAttribute("colspan", 4);