Javascript插入行 [英] Javascript Insert Row

问题描述

我有一个由多行组成的HTML表。我试图在表中的特定位置插入行。例如，如果我标记已存在的行并单击插入，则应在下面插入新行。目前在表格底部添加行有效。我需要的是将已构建的行插入某个位置。

I have an HTML Table consisting of several rows. I am trying to insert rows at a specific position in the table. For example if I mark an already existing row and click insert a new row should be inserted below. At the moment adding rows at the bottom of the table works. What I need is to insert the already build row at a certain position.

这是我的代码：

function addLine(lineNumberGlobal,columnnumber,insertion)
{
  var newrow = document.createElement("tr");
  newrow.setAttribute('id', globalObj.lineNumberGlobal);
  newrow.setAttribute('onmousedown', "setCurIdG(getAttribute(\"id\"))");

  for (j = 1; j <= globalObj.monthdays + 1; j++)
  {
    //build row cells with content
  } 

  if (insertion == true)
  {
    var newrowinsert = globalObj.bodyGlobal.insertRow(globalObj.currenIdGlobal);
    //this actually inserts a new empty row but I want to append my existing row "newrow"
  }
  else if (insertion == false)
  {
    globalObj.bodyGlobal.appendChild(newrow);
  } 

}

任何帮助将不胜感激.. 。

Any help would be appreciated ...

推荐答案

您可以使用 insertBefore DOM方法。如果要在已标记的行之后插入，则需要使用该行的 nextSibling 来查找其后的行，然后在该行之前插入。

You can use the insertBefore DOM method. If you want to insert after the row that you have marked, you would need to use that row's nextSibling to find the row after it, and then insert before that.

如果我假设 globalObj.currenIdGlobal 是您要在之后插入的行的ID，则如下所示：

If I assume that globalObj.currenIdGlobal is the ID of the row you want to insert after, that would look like this:

var refElement = document.getElementById(globalObj.currenIdGlobal);
if (refElement) { // Being defensive here, you probably know it _does_ exist
    globalObj.bodyGlobal.insertBefore(newrow, refElement.nextSibling);
}

假设您的HTML结构为否行之间的空格或类似内容（因为 nextSibling 将返回行之后的下一个节点，该节点可以是文本节点而不是元素）。如果你需要更具防御性：

That assumes that your HTML is structured with no whitespace or similar between rows (since nextSibling will return the next node after the row, which can be a text node rather than an element). If you need to be more defensive:

function findNextSiblingElement(elm, tagName) {
    do {
        elm = elm.nextSibling;
    } while (elm && (elm.nodeType != 1 || elm.tagName != tagName));
    return elm;
}

然后将上述内容更改为：

and then change the above to:

var refElement = document.getElementById(globalObj.currenIdGlobal);
if (refElement) { // Being defensive here, you probably know it _does_ exist
    globalObj.bodyGlobal.insertBefore(newrow, findNextSiblingElement(refElement, 'TR'));
}

请注意，如果您传递 null 作为 insertBefore 的第二个参数，它追加到最后。

Note that if you pass null as the second argument to insertBefore, it appends to the end.

FWIW，这样的操作可以如果您使用像 Prototype ， jQuery ，关闭，或其他几个人。

FWIW, operations like these can be made a bit easier if you use a library like Prototype, jQuery, Closure, or any of several others.

这篇关于Javascript插入行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！