4

I'm creating a table with Javascript so in a loop there's

if (formFieldData == 'cleanSlate')
{
  document.getElementById('productsTable').innerHTML = '';
  // clears what was there before, so we're left with an empty <table>
} else
{
  document.getElementById('productsTable').innerHTML += '<tr></tr>';
}

After a couple of iterations what I'm left with is this .. not sure how to display HTML for you so without the angle brackets: tbody tr /tr /tbody tbody tr /tr /tbody

Why is it inserting those tbodys and how can I stop it doing that?

JNAScarb
  • 53
  • 7
  • My question to you is... is it hurting your code? And you you also give us the loop, I think you have an order of operations issue if I'm reading your conditional right. – Eric Hodonsky Jan 26 '12 at 17:06
  • TBODY is browser dependant issue as far as I was aware. I think I agree with Marc B above. Other wise you would have to write the ALL the tables and inline it (make it all one line) – TheBlackBenzKid Jan 26 '12 at 17:13
  • reference to above comment: http://stackoverflow.com/questions/7490364/why-do-browsers-still-inject-tbody-in-html5 – TheBlackBenzKid Jan 26 '12 at 17:13

1 Answers1

4

What browser is this?

You shouldn't really be building up a table with innerHTML operations anyways. It's just a string operation, and the browser will have NO CLUE that you're adding multiple rows in sequence. So it's going to attempt to "clean up" your "broken" html.

If nothing else, at least build up the table rows in a separate string and then stuff that varaible into innerHTML after the loop completes:

var rows;
for(...) {
   if (...) {
      rows += '<tr></tr>\n';
   }
}
document.getElementById('productsTable').innerHTML = rows;

Of course, this exact code won't work - it's just an example.

Eric Hodonsky
  • 5,617
  • 4
  • 26
  • 36
Marc B
  • 356,200
  • 43
  • 426
  • 500
  • This will also help lessen browser lockout as your accessing the dom less often. – scrappedcola Jan 26 '12 at 17:11
  • I was thinking something with 'appendChild()', but that does work on the DOM, and you have to pass in a DOM element instead of a string which is more work on the browser. What you've got here is probably the best solution, but something is bothering me about his order of operations still. – Eric Hodonsky Jan 26 '12 at 17:25
  • @relic: you can build a dom tree as an "unjoined" branch and add it in later. – Marc B Jan 26 '12 at 17:46
  • @MarcB Yes, however that means the browsers is doing work and accessing memory. If you append a string to the DOM, it makes the browser accept and parse the new DOM and add it to the Tree and does all the work at once, and takes less memory. If you can avoid building a DOM element into a variable (Unless for storage and access) then you should try to always just append a string. – Eric Hodonsky Jan 26 '12 at 17:53
  • actually, there's no rendering involved with the un-joined branch. it is dom operations, but because that branch is not part of the on-screen document, there's no rendering overhead so you can mess with that branch as much as you want. – Marc B Jan 26 '12 at 18:52
  • OK, I hear ya. It's Firefox 7.0.1 btw in Linux. The way I have it, it's an object that adds a product line, so if I want to build the whole table up I'm going to have to pass variables around, which is fine, I just thought the whole point of the DOM was being able to tinker as I went. I'm new to that, so .. thanks y'all for your comments. – JNAScarb Jan 26 '12 at 20:37