Javascript 插入行

Question

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

这是我的代码:

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

}

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

Answer 1

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

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

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 将返回行后的下一个节点，它可以是文本节点而不是比一个元素)。如果您需要更具防御性:

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

然后把上面的改成:

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，它会附加到末尾。

FWIW，如果您使用像 Prototype 这样的库，这些操作可以变得更容易一些, jQuery , Closure , 或 any of several others .