Javascript Insert Row

Question

Hi,

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.

Here is my code:

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

Answer 1

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.

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

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

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

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

Answer 2

Use insertRow to create the row.

Also: Don't use setAttribute, it's broken in IE. And an event handler requires a function reference and not a string.

function addLine(lineNumberGlobal,columnnumber,insertion)
{

  var newrow = globalObj.bodyGlobal.insertRow(insertion ? globalObj.currenIdGlobal : -1);
  newrow.id = globalObj.lineNumberGlobal;
  newrow.onmousedown = function() { setCurIdG(this.id); };

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

}

BTW, you seem to be using the id to "re-find" the table rows. Consider keeping a reference to the row instead.