[RESOLVED] table rows added using DOM all wonky

sneakyimp

so here's a simplified version of my javascript function:

var rowCount = 0;
function addIndustryContact() {

  var elTableBody = document.getElementById('myTableBody');
  var existingRow = elTableBody.firstChild;

  var firstRow = document.createElement('tr');
  var rowID = 'foo1_' + rowCount;
  firstRow.setAttribute('id',  rowID);
  firstRow.innerHTML = '<td colspan="2" align="right" class="tableDark text4 gray">New Row Here Biotch</td>';
  elTableBody.insertBefore(firstRow, existingRow);

  var secondRow = document.createElement('tr');
  rowID = 'foo2_' + rowCount;
  secondRow.setAttribute('id',  rowID);
  secondRow.innerHTML = '<td class="someClass">cell one</td><td class="someOtherClass>cell two</td>';
  elTableBody.insertBefore(secondRow, existingRow);

  rowCount++;
}

The function will stick in the table rows HOWEVER the second row added doesn't show two cells in separate columns...it seems to add that second <td> as a third row rather than the 2nd cell in the 2nd row. Also, none of the classes I am specifying are showing up...everything is just plain white. The font family in these cells seems to be inherited from the page css, but the new cells don't have any of the colors or styling they should.

Am I missing something about DOM here? Is the problem my use of innerHTML rather than painstakingly adding each new table cell using DOM?

Any help would be much appreciated.

zabmilenko

You are missing a quote:

sneakyimp

Thanks for your response.

I fixed that. It's not the problem. Still lookin' wonky with no styles in effect and table busted.

zabmilenko

Sorry, I just remembered...

innerHTML cannot be used to write parts of a table in Firefox. You have to set the whole table with innerHTML, not mix and match.

In internet explorer, innerHTML is read-only for the table element.

Sorry, looks like you have to iterate through the dom. See:

http://msdn2.microsoft.com/en-us/library/ms533897.aspx
http://developer.mozilla.org/en/docs/DOM:element.innerHTML

sneakyimp

Thanks for your post...it confirms my suspicions. What nonsense!

I have a DOM iteration bit going on...something like this:

function addStuff() {
  var elTableBody = document.getElementById('stuffTableBody');
  var existingRow = elTableBody.firstChild;

  var firstRow = document.createElement('tr');
  var rowID = 'stuffRow1_' + stuffCount;
  firstRow.setAttribute('id',  rowID);
  var r1c1 = firstRow.insertCell(0);
  r1c1.setAttribute('colspan', 2);
  r1c1.setAttribute('align', 'right');
  r1c1.className = 'tableDark text4 gray';
  r1c1.innerHTML = 'New Industry Contact';
  elTableBody.insertBefore(firstRow, existingRow);

  var secondRow = document.createElement('tr');
  rowID = 'stuffRow2_' + stuffCount;
  secondRow.setAttribute('id',  rowID);
  var r2c1 = secondRow.insertCell(0);
  r2c1.setAttribute('align', 'right');
  r2c1.className = 'tableDark text2 bold';
  r2c1.innerHTML = 'Company';
  var r2c2 = secondRow.insertCell(1);
  r2c2.setAttribute('align', 'left');
  r2c2.className = 'tableLight';
  r2c2.innerHTML = '<div style="position:relative; "><input type="text" name="stuffs[' + stuffCount + '][companyName]" id="stuffCompanyName_' + stuffCount + '" autocomplete="off" style="width:300px;" onkeyup="setAutoFillTimer(this,event,\'&fillType=companyName\', \'stuffCompanyID_' + stuffCount + '\', \'findstuffCompanyMenu_' + stuffCount + '\');" onkeydown="return arrowPress(event, \'findstuffCompanyMenu_' + stuffCount + '\');" onblur="hideMenuOnBlur(\'findstuffCompanyMenu_' + stuffCount + '\');"><div class="autoFillMenu" id="findstuffCompanyMenu_' + stuffCount + '" style="height:250px; display:none;"></div></div><input type="hidden" name="stuffs[' + stuffCount + '][companyID]" id="stuffCompanyID_' + stuffCount + '">';
  elTableBody.insertBefore(secondRow, existingRow);

}

zabmilenko

Does it work like you expected?

sneakyimp

yes...sorry forgot thread resolved.