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
– Sam Dufel, Commented Mar 15, 2012 at 22:20
Hiya - this might help - stackoverflow.com/questions/1075415/… , cheers! — Tats_innit
– Tats_innit, Commented Mar 15, 2012 at 22:22

Steve · Accepted Answer · 2012-03-15 22:34:42Z

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, 2012 at 22:34

answered Mar 15, 2012 at 22:16

Steve

8,6487 gold badges42 silver badges54 bronze badges

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

2 Comments

sammiwei Over a year ago

In ur case, I would be adding data to the same <td> cell

Steve Over a year ago

My apologies, I misread your goal. I corrected the above to reflect what you want.

elclanrs · Accepted Answer · 2012-03-15 22:24:28Z

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, 2012 at 22:24

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Taha Paksu · Accepted Answer · 2012-03-15 22:26:34Z

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, 2012 at 22:26

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

1 Comment

Taha Paksu Over a year ago

and if you want data inside the td's, you'd just write "<td>"+data+"</td>" inside the brackets.

sammiwei · Accepted Answer · 2012-03-15 22:29:05Z

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, 2012 at 22:29

sammiwei

3,2289 gold badges43 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to append multiple table cells using jQuery

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Linked

Related