How do I add a row to a table using jQuery when the data comes from a HTML element?

Question

I have the following HTML:

<table id="tableName">
  <tr>
    <td>One</td>
  </tr>
</table>

<div id="divTableRow">
  <tr>
    <td>Two</td>
  </tr>
</div>

I have the following code:

$('#tableName').append($('#divTableRow').html());

I have tried many ways such as targeting the tbody that jQuery creates however my TR and TD tags are never brought across.

Is there a way to encapsulate the html so it is inserted exactly as it is? I can not put everything in quotes as it contains a lot of inputs etc

That is completely invalid html so do not expect it to ever work. Why would you have table rows in a div? — mplungjan, May 19 '11 at 11:28

mplungjan · Accepted Answer · 2011-05-19T14:33:29.563

4

That is completely invalid html so do not expect it to ever work. Why would you have table rows in a div?

This would work

http://jsfiddle.net/mplungjan/ZHuuY/

$("#tableRow tr").each(function() {
    $('#tableName').append($(this).clone());
});

or this if you want to move rather than copy

$("#tableRow tr").each(function() {
  $('#tableName').append($(this));
});                             

<table id="tableName" style="border:1px solid green">
  <tr>
    <td>One</td>
  </tr>
</table>

<table id="tableRow" style="display:none">
  <tr>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
</table>

generated html:

<table style="border:1px solid green" id="tableName">
  <tbody>
  <tr>
    <td>One</td>
  </tr>
  <tr>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
  </tbody>
</table>

edited May 19 '11 at 14:33

answered May 19 '11 at 11:31

mplungjan

169,008
28
173
236

How is this valid? Your appending a whole table inside another table and not in a cell. i.e. it's got two elements, this isn't semantically correct. There should only be one tbody for a table. – Gary Green May 19 '11 at 11:57
This kinda worked, the only problem is it moved the content from one place to the other, I didn't realise .append() did that. I have played around and still can't get it to copy instead. if I use .html() it puts it in a another tbody within the tbody. Any ideas on how to clone it rather then move it? – Tokes May 19 '11 at 13:49
Brilliant! thank you very much. Works perfect. Just for my own understanding can you explain how this works? The section $('#tableName').append($(this).clone()); how does this get placed in the tbody? is it done before the browser adds tbody? – Tokes May 19 '11 at 15:02
Actually it probably does. It is likely that the tbody is only shown when you ask to see it. Here are some solutions that does look at the tbody issue http://stackoverflow.com/questions/171027/jquery-add-table-row – mplungjan May 19 '11 at 16:19

score 1 · Answer 2 · answered May 19 '11 at 12:16

Restructure it to something like:

<table id="tableName">
  <tr>
    <td>One</td>
  </tr>
</table>

<div id="divTableRow">
   <!-- any html here, the below is just an example !-->
   <a href="/home">Home</a>
 </div>

Then you can simply do:

$('#tableName > tbody').append($('<tr>').html($('#divTableRow')));

Also your comment:

"I have tried many ways such as targeting the tbody that jQuery creates"

This is incorrect, jQuery doesn't create a tbody, the browser does. Tables are semantically invalid without it, although of course it works without because of the forgiving nature of browsers. It's important to factor it into the selector otherwise it'll add the <tr> outside the tbody, which is wrong.

How do I add a row to a table using jQuery when the data comes from a HTML element?

2 Answers2