0

in the html i have an empty table tag.

<table cellpadding="5" cellspacing="5" border="0" id="TableID" class='TableOne'>
</table>
<input id="btn" value="test" type="button" />

in a jscript function, i'm adding some initial rows to the table, one of which contains another table.

$('#btn').click(function() {
  var html = '';
  html += "\
    <tr>\
      <td>Row1\
        <table>\
          <tr>\
            <td></td>\
          </tr>\
        </table>\
      </td>\
    </tr>\
    <tr>\
      <td>Row2</td>\
    </tr>";
  $('#TableID').html(html);                   
  var newhtml = "<tr><td>Row3</td></tr>";
  $('#TableID').append(newhtml);
});

...

.tableOne
{
  border: 3px solid black;    
}
.tableTwo
{
  border: 2px solid red;
}

When this code is executed.... instead of seeing

Row1 Row2 Row3

we see

Row1 Row3 Row2

Row 3 is being put within the inner table. Not the table I specified by id.... how can i fix this??

Edit:

I'm not sure what the cause of this actually is, but I found a work around.

<table cellpadding="5" cellspacing="5" border="0" class='tableOne'>
  <tbody id="TableID"></tbody>
</table>
<input id="btn" value="test" type="button" />

...

$('#btn').click(function() {
  var html = '';
  html += "\
    <tr>\
      <td>Row1\
        <table>\
          <tr>\
            <td></td>\
          </tr>\
        </table>\
      </td>\
    </tr>\
    <tr>\
      <td>Row2</td>\
    </tr>";
  $('#TableID').html(html);                   
  var newhtml = "<tr><td>Row3</td></tr>";
  $('#TableID').append(newhtml);
});

..

http://jsfiddle.net/sjord010/U88fa/3/

Steph
  • 409
  • 2
  • 8
  • 14
  • Do you close your initial `` tag?
     – Jimmy Sawczuk Apr 26 '11 at 22:45
  • Whipped this up in jsFiddle: http://jsfiddle.net/JimmySawczuk/bPwMg/, is the same problem occurring here? From what I can see, this is expected behavior. – Jimmy Sawczuk Apr 26 '11 at 22:50
  • Yes, I did close my initial table tag. My code is actually alot more complex than that, that was a very simplified version. Never seen jsFiddle before, good tool. But that is what should be happening... not's what is happening in my actual code. I'll see what i can do to post some of the actual code here – Steph Apr 26 '11 at 22:53
  • I've added quite a bit of the actual code. If there's something missing, let me know. – Steph Apr 26 '11 at 23:05
  • It seems like the only difference between my jsFiddle and your abbreviated example, then, is that I'm using two `$.append`s instead of one `$.append` and one `$.html`. Can you apply that to your actual case? – Jimmy Sawczuk Apr 26 '11 at 23:39
  • I modified your jsFiddle to use .html and it works there as well :-( I'm working on modifying my code to it's simplest form and still recreating the problem.. maybe i'll find seomthing. – Steph Apr 26 '11 at 23:50
  • http://jsfiddle.net/sjord010/U88fa/ simplified example that still has a problem – Steph Apr 27 '11 at 00:34

2 Answers2

1

Going off of the discussion in the comments, I think $.html just doesn't like when you pass it in malformed HTML. Regardless, here's an updated jsFiddle, and I just used $.append and cleaned up the whitespace a bit. Hope this helps. For posterity's sake, here's the relevant JS code:

var html = '';
html += "<tr><td><table class='tableTwo'><tr><td>Row1</td></tr></table></td></tr>";

html += "<tr><td><table class='tableTwo'><tr><td>Row2</td></tr></table></td></tr>";

$('#TableID').append(html);
newhtml = "<tr><td>Row3</td></tr>";
$('#TableID').append(newhtml);
Jimmy Sawczuk
  • 13,488
  • 7
  • 46
  • 60
1

Try this out instead of append. 

$('#TableID > tr:last').after(newhtml);

This answer has a lot more information about this as well.

Updated fiddle.

Community
  • 1
  • 1
Mark Coleman
  • 40,542
  • 9
  • 81
  • 101
  • This wont' work for me considering the last tr is technically the one that is contained within an inner table, so really it would cause the same issue. I actually tried this. – Steph Apr 27 '11 at 14:32