如何將嵌套的數據表添加到HTML表

我使用JavaScript動態地構建表，並且我需要嵌套另一個表，該表將成爲第一個HTML表格中的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.

來源

2015-06-30 trouble706

建議您創建一個複製問題的演示。數據資源可以在多個不同的CDN上使用 – charlietfl

這個問題是因爲我用顯示器造成的：無。現在就是這個事情..如果你不使用那個特定的樣式屬性，那麼表格會顯示在頁面上。但是，由於它嵌套在我的第一個表格中，並且第一個表格已經應用了display：none樣式屬性，所以通過將其應用於第二個表格，它不允許該表格顯示在頁面上。至於歪斜的表情，我沒有設置一個colspan。所以現在它完美地工作了。我註釋掉了沒有顯示，並添加了這一行代碼...

bdyTbl.setAttribute("colspan", 4);

來源

2015-06-30 18:31:22 trouble706

如何將嵌套的數據表添加到HTML表

回答

相關問題