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.

Improve this question
8
  • try $('#myTable').find('tbody:last').append('<html>') Commented Apr 2, 2015 at 18:18
  • you have tbody in current table? I don't see it in generated table content from your php Commented Apr 2, 2015 at 18:22
  • Yes, I have tbody in my original table, but not in what's generated from php. Should I add <tbody> to the table coming from php? Commented Apr 2, 2015 at 18:39
  • @daremachine I tried adding <tbody> to the incoming html and yor suggestion above. It resulted in the table coming in below the original table. Commented Apr 2, 2015 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? Commented Apr 2, 2015 at 18:53

2 Answers 2

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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!
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.