无法在使用<tbody>标签时添加行。

Question

无法在使用<tbody>标签时添加行。

4

我有一个表格，通过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>

- kavi

很奇怪的是，如果不显式声明 tbody ，仅制作一个简单的示例，选择 table tbody 就会失败。除非您最初添加了一些现有行。请尝试自己运行一个简单的演示。我认为你的问题是其他原因。尝试模拟一个简单的对象进行测试（不涉及 ajax 请求）。 - Hopeless

2个回答

0

只需从您的样式中取消注释以下内容即可。

.t1 tbody { display: block; }

这似乎使列看起来像是在单个列下面。

快速示例...

https://jsfiddle.net/juastyzL/

- Rick

啊，抱歉.. 没有注意到滚动条.. 你将会花费很大的力气来尝试让这个在所有浏览器中都能工作.. 插件是你的好朋友！ - Rick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user7699053 · Accepted Answer

现在我理解您想让您的滚动，是的，它确实需要成为一个块，但您需要修复及其包含元素的布局。您可以在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>