Question

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

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

Answer 2

假设您没有使用jQuery，您可以执行以下操作：

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

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

或者，如果你有jQuery，

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

Answer 3

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

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

容纳行的表内的容器元素

3 个答案: