我给标签时无法追加行

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>
    	<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/