javascript - 在不重新渲染的情况下将行添加到 HTML 表的最佳方法

Question

我正在使用 websockets (socket.io) 进行实时处理，可能是将新项目添加到集合中，然后我想将其添加到屏幕上。有没有一种无需重新呈现整个 View 即可向 HTML 表格添加行的好方法？

Answer 1

您可以在该表上使用 insertRow。这是一个例子:

<table id="TableA">
<tr>
<td>Old top row</td>
</tr>
</table>
<script type="text/javascript">

function addRow(tableID) {
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow   = tableRef.insertRow(0);

  // Insert a cell in the row at index 0
  var newCell  = newRow.insertCell(0);

  // Append a text node to the cell
  var newText  = document.createTextNode('New top row');
  newCell.appendChild(newText);
}

// Call addRow() with the ID of a table
addRow('TableA');

</script>

示例取自 Mozilla page for insertRow .