當我給<tbody>標籤時無法追加行

Question

我有一張通過jQuery動態加載數據的表。我的代碼工作正常，如果我刪除<thead>和<tbody>標籤。雖然當我添加這些標籤的代碼不會工作;特別是行不會追加。行正在添加到一列下。

if(responseJson.length!=null){ 
 
$("#itemtable").find("tr:gt(0)").remove(); 
 
    var table1 = $("#itemtable tbody"); 
 
    var i = 1; 
 
    $.each(responseJson, function(key,value) { 
 
     var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 
 
      rowNew.children().eq(0).text(value['slno']); 
 
      rowNew.children().eq(1).text(value['itemname']); 
 
      rowNew.children().eq(2).text(value['itemcode']); 
 
      rowNew.children().eq(3).text(value['supplier']); 
 
      rowNew.children().eq(4).text(value['receivedqty']); 
 
      rowNew.children().eq(5).text(value['rejectedqty']); 
 
      rowNew.children().eq(6).text(value['acceptedqty']); 
 
      rowNew.children().eq(7).text(value['remarks']); 
 
      rowNew.appendTo(table1); 
 
      i++; 
 
    }); 
 
}

/* table-itemtable styles */ 
 
.t1 { border-collapse: collapse; width: 100%;} 
 
.t1 th, td { text-align: left; padding: 8px;} 
 
.t1 th {background-color: #4CAF50; color: white;} 
 
.t1 tbody { display: block; } 
 
.t1 tbody { 
 
    height: 300px;  /* Just for the demo   */ 
 
    overflow-y: auto; /* Trigger vertical scroll */ 
 
    overflow-x: hidden; /* Hide the horizontal scroll */ 
 
}

<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px"> 
 
    <thead> 
 
    <tr> 
 
    \t <th> SLno</th> 
 
     <th>Item name</th> 
 
     <th>Item code</th> 
 
     <th>Supplier</th> 
 
     <th>Received qty</th> 
 
     <th>Accepted qty</th> 
 
     <th>Rejected qty</th>  
 
     <th>Remarks</th>    
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

Answer 1

現在，我知道你想你的tbody滾動，是的，它確實需要一個塊，但你需要修復的thead的佈局，它包含的元素。你可以看到最後兩個CSS塊的變化。

注意：滾動，固定標題和表格佈局（定位和列寬）長期以來一直困擾着顯示。這就是爲什麼，如果你更精確的列寬，你將不得不動態應用自定義樣式 - 一個比聽起來容易的壯舉。您可能不希望重新創建輪子並探索DataTables。

function rand() { 
 
    return Math.floor(Math.random() * 10000) + 1 
 
} 
 
var keys = [ 
 
    "slno", 
 
    "itemname", 
 
    "itemcode", 
 
    "supplier", 
 
    "receivedqty", 
 
    "rejectedqty", 
 
    "acceptedqty", 
 
    "remarks" 
 
]; 
 
var responseJson = [...Array(100)].map(r => { 
 
    var r = rand(), o = {}; 
 
    keys.forEach(key=>{o[key]= [key,r].join('-');}); 
 
    return o; 
 
}); 
 

 
if (responseJson.length != null) { 
 
    var $tbl = $("#itemtable"), 
 
    $tbody = $tbl.find('tbody'); 
 

 
    $tbody.find('tr').remove(); 
 

 
    $.each(responseJson, function(i, obj) { 
 
    var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 
 
    keys.forEach((key, i) => { 
 
     rowNew.children().eq(i).text(obj[key]) 
 
    }); 
 
    rowNew.appendTo($tbody); 
 
    }); 
 
}

/* table-itemtable styles */ 
 

 
.t1 { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
.t1 th, 
 
td { 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
.t1 th { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
.t1 tbody { 
 
    display: block; 
 
} 
 

 
.t1 tbody { 
 
    height: 8em; 
 
    /* Just for the demo   */ 
 
    overflow-y: auto; 
 
    /* Trigger vertical scroll */ 
 
    overflow-x: hidden; 
 
    /* Hide the horizontal scroll */ 
 
} 
 

 

 
/* ===== UPDATES HERE: ====*/ 
 

 
td { 
 
    overflow-x: hidden; 
 
    /* too much data affects visibility */ 
 
} 
 

 
thead, 
 
tbody tr { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    /* fix width of table and columns */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px"> 
 
    <thead> 
 
    <tr> 
 
     <th>SLno</th> 
 
     <th>Item name</th> 
 
     <th>Item code</th> 
 
     <th>Supplier</th> 
 
     <th>Received qty</th> 
 
     <th>Accepted qty</th> 
 
     <th>Rejected qty</th> 
 
     <th>Remarks</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

Answer 2

只需取消註釋從您的樣式如下..

.t1 tbody { display: block; } 

這似乎是使列看起來好像他們是一個單一的列下..

快速樣品..

https://jsfiddle.net/juastyzL/