当我给<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/