CODEWITHSUNDEEP
javascriptjquerycss
user3697407
user3697407

Reputation: 101

Appending DOM data to a row with jquery

I am trying to use after() to place more DOM data (a <table>) after a $('tr'); I am noticing that the width of the new element changes the width of the tr's first td element. What can I do to prevent that?

$('#table tr').click(function(){
    $(this).after(table);
    $('#data').slideDown("slow");
});

http://jsfiddle.net/HZLLb/1/

Upvotes: 0

Views: 42

Answers (1)

dave
dave

Reputation: 64657

As the comments stated, you can't have a table element in that position, and you should not repeat id's. You CAN, however, have multiple tbody elements, as well as multiple elements with the same class, which is likely the solution you are going for:

var table = '<tbody class="data" style="display:none;"><tr><td>Test</td><td>Test</td>            <td>Test</td></tr></tbody>';

$('#table').on('click', 'tr', function(){
  $(this).closest('tbody').after(table);
  $('.data').last().slideDown("slow");
});

http://jsfiddle.net/HZLLb/3/

Upvotes: 1

Related Questions