How to append multiple table cells using jQuery

Question

jq('#table1') 
  .append(jq('<tr>') 
    .append(jq('<td>') 
      .append('data1' 
      ) 
    ) 
  );

I want to append more than one <td> to my current <tr>, each of these <td> has different format, so I can not just use a for loop to create bunch of <td>. The ( ) in this case is very tricky, anybody got an idea how this might work?

By each of these <td> has different format, I mean that I need to add $ to some of the cells that representing money, etc.

You'll have to be more specific about what you're trying to do if you want a good answer. — Sam Dufel, Mar 15 '12 at 22:20
Hiya - this might help - http://stackoverflow.com/questions/1075415/jquery-add-html-table-column , cheers! — Tats_innit, Mar 15 '12 at 22:22

Steve · Answer 1 · 2012-03-15T22:34:42.690

3

jq('#table1').append(
    jq('<tr>')
        .append(jq('<td>').append('data1')) 
        .append(jq('<td>').append('data2')) 
        .append(jq('<td>').append('data3')) 
);

EDIT: Corrected to append tds, not data in tds

edited Mar 15 '12 at 22:34

answered Mar 15 '12 at 22:16

Steve

8,609
6
40
54

In ur case, I would be adding data to the same cell – sammiwei Mar 15 '12 at 22:20
1

My apologies, I misread your goal. I corrected the above to reflect what you want. – Steve Mar 15 '12 at 22:35

score 1 · Answer 2 · answered Mar 15 '12 at 22:24

1

Create the markup first and append everything at last for best performance:

var tds = [
    '<td>...</td>',
    '<td>...</td>',
    '<td>...</td>'
];

$('#table').append('<tr>' + tds.join('') + '</tr>');

answered Mar 15 '12 at 22:24

elclanrs

92,861
21
134
171

score 1 · Answer 3 · answered Mar 15 '12 at 22:26

1

jq("#table1").append("<tr></tr>");

then;

jq("#table1 tr:last").append("<td></td>");
jq("#table1 tr:last").append("<td></td>");
jq("#table1 tr:last").append("<td></td>");
jq("#table1 tr:last").append("<td></td>");

will append 4 td's to your last added tr.

answered Mar 15 '12 at 22:26

Taha Paksu

15,371
2
44
78

and if you want data inside the td's, you'd just write ""+data+"" inside the brackets. – Taha Paksu Mar 15 '12 at 22:27

score 1 · Accepted Answer · answered Mar 15 '12 at 22:29

1

  jq('#table1') 
  .append(jq('<tr>') 
    .append(jq('<td>').append('data1')) 
    .append(jq('<td>').append('data1')) 
    .append(jq('<td>').append('data2')) 
    .append(jq('<td>').append('data3'))     
  );

answered Mar 15 '12 at 22:29

sammiwei

3,140
9
41
53

How to append multiple table cells using jQuery

4 Answers4