如何將嵌套表添加到數據表？

Question

我需要向jquery數據表的每一行添加一個嵌套表（使用舊式數據表）。 因此，我嘗試使用datatables.net中的示例作為子行並將其修改為滿足我的需要，以使子行始終顯示，而不是單擊父行。這是我同時使用這兩個代碼來構建的代碼我的內表，然后顯示它。

function buildInnerTable(){
var keys = Object.keys(reportApp.gridData),
    len = keys.length,
    j = 0,
    prop,
    value;
while (j < len) {
    prop = keys[j];
    value = reportApp.gridData[prop];
   detLen = value.detail.length;
   var rowVals = [];
    for(var i = 0; i < detLen; i++){
         tmpRow = "<tr><td>"+value.detail[i].invtid+"</td>"+
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].qtyship+"</td>"+  
                "<td>"+value.detail[i].ordqty+"</td>"+  
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].exttreating+"</td>"+  
                "<td>"+value.detail[i].extpriceinvc+"</td>"+  
                "<td>"+value.detail[i].misc+"</td>"+ 
                "<td>"+value.detail[i].extother+"</td>"+
                "<td>"+value.detail[i].calcext+"</td></tr>";
        rowVals.push(tmpRow);

    }
    setTableRow(rowVals , j);
    j += 1;
}


function setTableRow(rowVals , ndx){

              $("#gridTbl > tbody > tr:eq("+ ndx+ ")").after("<table><tr><th>InvtID</th>"+
                      "<th>Clss</th><th>Pieces</th><th>BilQty</th><th>BF</th><th>Treating</th>"+
                      "<th>Wood</th><th>NEED NAME</th><th>Other</th><th>Misc</th><th>Total</th></tr>"+
                      rowVals);

但是，我沒有得到所需的東西。 看起來像是數據表添加了新行，然后在新行的第一個單元格內設置了新表。 但是，當我查看源代碼時，這根本沒有發生。 它關閉了上一行，然后插入了新表。 我需要的是將詳細信息顯示在主要項目行的下方，並以相同的方式進行對齊。 如果我做錯了任何幫助，將不勝感激。

Answer 1

好吧...終於明白了。 為了使視圖正常顯示，我必須在數據表中添加新行，然后在該行的旁邊添加新表。 但是，這導致表出現索引問題。 因此，在每次添加新行之前，我都必須檢查索引。 我正在發布工作代碼，希望對其他人有所幫助。

    function buildInnerTable(){
    var keys = Object.keys(reportApp.gridData),
    len = keys.length,
    j = 0,
    prop,
    value;
while (j < len) {
    prop = keys[j];
    value = reportApp.gridData[prop]; 
   detLen = value.detail.length;
   var rowVals = [];
//THIS NEXT LINE IS WHERE I GET MY INDEX...
   var ndx = ($("tr:contains("+value.invcnbr+ ")").index());
    for(var i = 0; i < detLen; i++){
         tmpRow = "<tr><td>"+value.detail[i].invtid+"</td>"+
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].qtyship+"</td>"+  
                "<td>"+value.detail[i].ordqty+"</td>"+  
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].exttreating+"</td>"+   
                "<td>"+value.detail[i].extpriceinvc+"</td>"+  
                "<td>"+value.detail[i].misc+"</td>"+ 
                "<td>"+value.detail[i].extother+"</td>"+
                "<td>"+value.detail[i].calcext+"</td></tr>";
        rowVals.push(tmpRow);
    }

    setTableRow(rowVals,ndx);
   }
    j += 1;
  }
} 


function setTableRow(rowVals,ndx){
    var outerTbl = $('#gridTbl').DataTable();
    var tr = $("#gridTbl > tbody > tr:eq("+ ndx+ ")");
//NOTE HOW I ADD A ROW AND THEN ADD NEW TABLE TO CELL IN THE ROW.
   var innerTbl = "<tr><td colspan = 10><table style = 'background-     color:#FFFFFF; width:100%; border:1px solid;'><tr><td>InvtID</td>"+
                      "<td>Clss</td><td>Pieces</td><td>BilQty</td><td>BF</td><td>Treating</td>"+
                      "<td>Wood</td><td>NEED NAME</td><td>Other</td><td>Misc</td><td>Total</td></tr>"+
                      rowVals + "</td></tr>";
             tr.after(innerTbl).show();


}