包含行的表内的容器元素答案

【问题标题】：Container element inside of a table that holds rows包含行的表内的容器元素
【发布时间】：2015-09-08 08:46:24
【问题描述】：

我在 ajax 调用返回时动态地将表行（或多行）插入到表中。我希望通过在我的 html 表中添加一个空的容器类型元素来实现这一点，我可以将 <tr> 元素插入其中。正如我从其他帖子中看到的那样，一个 div 不能包含一个 tr 元素，所以我的问题是，有没有一种特殊的方法可以将行的 html 插入到表格中？它本质上必须是动态的，或者换句话说，我需要能够持有不止一个<tr>。

【问题讨论】：

<table><tbody></tbody></table> 有什么问题？

标签： javascript html css ajax html-table

【解决方案1】：

您可以追加到表格的最后一行。

<table>
  <tr><td>First Row</td></tr>
  <tr><td>Middle Row</td></tr>
  <tr><td>Last Row</td></tr>
</table>

<script>
$( "#tableid tr:last" ).append(
</script>

【讨论】：

【解决方案2】：

假设你没有使用 jQuery，你可以这样做：

var myTable = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var row = myTable.insertRow(myTable.rows.length);

然后您可以在row 上使用insertCell 插入单元格。

或者，如果你有 jQuery，

$("#myTable").append("<tr><td>Table Row with cell!</td></tr>");

【讨论】：

【解决方案3】：

我不确定您为什么不直接使用 <table> 元素，而是可以将 <tbody> 元素用作表格中的行容器。

onload = function(){
  document.getElementById("aButton").onclick = addRow.bind(null, "a");
  document.getElementById("bButton").onclick = addRow.bind(null, "b");
}

function addRow(id) {
  var r = document.getElementById(id).insertRow(-1);
  var c = r.insertCell(-1);
  c.innerHTML = "Row added at " + new Date().toLocaleTimeString();
}

body {
  font-family: sans-serif;
  font-size: 12px;
}
table {
  border-collapse: collapse;
  margin: 8px 0;
}
td {
  border: 1px solid #ccc;
  padding: 1px 2px;
}

<button id="aButton">Add row to 'A'</button>
<button id="bButton">Add row to 'B'</button>
<table>
  <tbody><tr><td>Before A</td></tr></tbody>
  <tbody id="a"></tbody>
  <tbody>
    <tr><td>After A</td></tr>
    <tr><td>Before B</td></tr>
  </tbody>
  <tbody id="b"></tbody>
  <tbody><tr><td>After B</td></tr></tbody>
</table>

【讨论】：