0

I've looked at several questions such as this one: Add table row in jQuery and this one: jQuery add HTML table column But my situation is a bit different.

I have an existing table and I want to add multiple columns to the end. I've tried:

$('#myTable tr:last').after
$('#myTable > tbody:last').append
$("#myTable > tbody").append
$('#myTable > tbody:first').append
$('#myTable').find('tbody:last').append

I think this is because what I'm bringing in are separate rows created by PHP.

I do some calculations and echo back html rows like this: (keep in mind the comments are there to show you the format. I don't actually echo back those comments)

<!--<tr><td>11133150.5</td><td>-6027209.5</td><td>31</td></tr><tr><td>11133678.8</td><td>-6027083.6</td><td>31</td></tr><tr><td>11133027.7</td><td>-6027256.7</td><td>31</td></tr><tr><td>11133136.9</td><td>-6027178.9</td><td>31</td></tr><tr><td>11133175.1</td><td>-6027538.3</td><td>31</td></tr><tr><td>11132970.5</td><td>-6027393.1</td><td>31</td></tr><tr><td>11133117.4</td><td>-6026786.8</td><td>31</td></tr><tr><td>11133507.2</td><td>-6027230.5</td><td>31</td></tr><tr><td>11133733.8</td><td>-6027372.2</td><td>31</td></tr><tr><td>11133444.4</td><td>-6026785.8</td><td>31</td></tr><tr><td>11133953.7</td><td>-6027232.9</td><td>31</td></tr><tr><td>11133073.2</td><td>-6027232.7</td><td>31</td></tr><tr><td>11134175.4</td><td>-6027043.2</td><td>31</td></tr><tr><td>11133973.5</td><td>-6026862.6</td><td>31</td></tr><tr><td>11133548.3</td><td>-6026404.2</td><td>31</td></tr><tr><td>11133327.9</td><td>-6026073.9</td><td>31</td></tr><tr><td>11133105.4</td><td>-6026271.5</td><td>31</td></tr><tr><td>11133154.9</td><td>-6027287.6</td><td>31</td></tr><tr><td>11133179</td><td>-6027305.4</td><td>31</td></tr><tr><td>11133223.6</td><td>-6027247.9</td><td>31</td></tr><tr><td>11133128.7</td><td>-6027094.8</td><td>31</td></tr><tr><td>11133010.9</td><td>-6027277.4</td><td>31</td></tr><tr><td>11133241.8</td><td>-6027367.1</td><td>31</td></tr><tr><td>11133361.6</td><td>-6027437.1</td><td>31</td></tr><tr><td>11133298.1</td><td>-6027167.3</td><td>31</td></tr><tr><td>0</td><td>166021.4</td><td>31</td></tr>--!>

When I try to add them to the existing table (of the same length) I get it on the end of the table (underneath it) or I've had it nested inside, but all I want is for it to append to the end of the table as new columns.

I'm not sure if this is the best way to do this, or if there's something else I'm missing.

Update To help anyone help me figure this out I made a fiddle: Fiddle

Thanks for the help.

Community
  • 1
  • 1
Crimpy
  • 195
  • 20
  • try $('#myTable').find('tbody:last').append('') – daremachine Apr 02 '15 at 18:18
  • you have tbody in current table? I don't see it in generated table content from your php – daremachine Apr 02 '15 at 18:22
  • Yes, I have tbody in my original table, but not in what's generated from php. Should I add to the table coming from php? – Crimpy Apr 02 '15 at 18:39
  • @daremachine I tried adding to the incoming html and yor suggestion above. It resulted in the table coming in below the original table. – Crimpy Apr 02 '15 at 18:44
  • You have printed table with current data and where you take new data what you want to add? Any js event on click or where? – daremachine Apr 02 '15 at 18:53
  • I click on a button that sends data to PHP then the PHP echos back to the html. The size of the original table in the parent html is variable, but the number of columns coming back is static (3 in this case). – Crimpy Apr 02 '15 at 19:10
  • If you're trying to add columns, you need to append new td's to the tr's. You can't have those new tr tags. You'll have to bring each "row" (set of tds) of new data in separately, and append each set of tds to the correct tr. Your problem is all your trs are automatically making new rows. – dmgig Apr 03 '15 at 16:15
  • @dgig I was afraid that might be the case. I'm not sure how I can do that from PHP. I guess I need to send back a json object with the new tds and then decode it back to the table on the client side? – Crimpy Apr 03 '15 at 16:18

2 Answers2

1

If you're trying to add columns, you need to append new td's to the tr's. You can't have those new tr tags. You'll have to bring each "row" (set of tds) of new data in separately, and append each set of tds to the correct tr. Your problem is all your trs are automatically making new rows.

I don't know how much control you have over all of this, but what I've tried to do in the past is keep my data as actual data that mimics the same row/col format of an html table, meaning json that looks something like this:

[
   [ 1, 2, 3, 4, 5, 6 ],
   [ 1, 2, 3, 4, 5, 6 ],
   [ 1, 2, 3, 4, 5, 6 ]
]

And then write a jquery script that can convert this into an html table whenever you tell it to (basically something using nested "for" loops). Then you can just bring the data in, and update it as you need.

But for how you're doing it, it is defintely tough. You could maybe take your new html, tr tags and all, put it in a new, hidden table somewhere in your DOM, and then try and parse that and move the tds in chunk by chunk. That's all I can think of for a pure jQuery solution.

dmgig
  • 4,400
  • 5
  • 36
  • 47
1

Your code doesn't work as intended because you are inserting an entire table into the first occuring <tr> element into your first table. In order to loop through all rows correctly, you will have to first process your incoming HTML. Here's the strategy:

  1. Convert your table2 into a jQuery object. However, remember that since jQuery .find() cannot search for sibling elements at the top level (which is <tr> in your case), we have to wrap it first.
  2. Wrap your original table2 HTML string by simply adding <table></table> around it. .wrap() does not work here because of the same reason stated above, so we do a simple string concatenation.
  3. Now we have your jQuery object ready to use. We use .find() to fish out all the <tr>, loop through each of them—find the cell in each table row, and append them to your existing table row by index. Since your first row is simply a header, we offset the index by 1 (using i+1).

Without further ado, here is the code:

// Wrap your second table with <table>, only because jQuery cannot find sibling elements (i.e. at the same level)
var $t2 = $('<table>'+table2+'</table>');
$t2.find('tr').each(function(i) {
    var $row = $('#test table tbody tr').eq(i+1);
    $(this).find('td').appendTo($row);
});

And the working fiddle: http://jsfiddle.net/teddyrised/wkezt8o6/1/

Terry
  • 63,248
  • 15
  • 96
  • 118
  • I had to parse the php string to html using `table2 = $(xmlhttp.responseText).html()` after it came back but I got it work. Thanks a lot! – Crimpy Apr 03 '15 at 22:48