jQuery-从PHP将多个列追加到表

Question

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.

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

Answer 2

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/