1

我有一种情况，当有一个表格时，您可以通过单击一个按钮来添加一个新行。该行由服务器动态生成，并以 HTML 形式传回。所以基本上我需要做的是将新行添加到旧表的前缀。像这样的东西：

tableelement.innerHTML = newHtml + tableelement.innerHTML;

这肯定行得通，但我有一个表头，显然，我需要在它之后插入新的 html。我该怎么做？insertBefore 或 insertAfter 无济于事（afaik），因为它们用于插入元素而不是未解析的 HTML。那么，拥有标题行的对象，我怎么能在它之后（或之前）插入另一行（在 HTML 中）？

谢谢你的想法

4

4 回答 4

1

使用jQuery.after()。

一般来说，要熟悉jQuery，因为它是处理这类事情的绝佳库。

于 2010-05-06T16:11:15.280 回答
0

您在服务器端有多少控制权？如果您有任何控制权，我建议您不要从服务器端传回 HTML，而是传回表格的数据。

然后你可以自由地使用 JQuery 或 MooTools 在表中动态插入 DOM 结构而不是 HTML。

于 2010-05-06T16:11:49.197 回答
0

我会考虑重新考虑这种方法。 innerHTML对于 Internet Explorer 中的表是只读的，因此您必然会遇到与当前方法的互操作性问题。您可以重组代码以使用 DOM 构建元素，而不是指定innerHTML. 它相当简单，更高效（不调用解析器）并且更兼容跨浏览器。

Mozilla 似乎同意微软的观点，并引用element.innerHTML文档：

[innerHTML] 永远不应该用于编写表格的一部分——应该使用 W3C DOM 方法——尽管它可以用于编写整个表格或单元格的内容。

该过程涉及使用 DOM 级别 2 方法，table.insertRow()以及tr.insertCell(). 要获得体面的阅读，请参阅动态构建表 (MSDN)。

示例（来自 MDC）：

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);
}
于 2010-05-06T16:31:33.217 回答
0

如果新的 HTML 元素只是一个字符串，那么您的代码是正确的并且没有问题。但是，当 HTML 元素包含 HTML DOM 元素（尤其是输入、文本区域等表单的一部分）时，您应该使用 document.createElement() 方法。如果你使用原型和scriptaculous，你应该尝试 Builder.node()。

/* using native DOM */
//create new row
var new_row = document.createElement('tr');
//create new column
var new_column = document.createElement('td');
//add a text to column or cell
new_column.innerHTML = 'my new string';
new_row.appendChild(new_column);
tableelement.insertBefore(new_row, tableelement.firstChild);

/* using prototype & script.aculo.us */
var new_cell = Builder.node('tr', [
    Builder.node('td', 'my new string')
]);
new Insertion.Top(tableelement, new_cell);
于 2010-07-28T22:02:02.587 回答