CODEWITHSUNDEEP
javascriptjqueryhtml-table
The Masta
The Masta

Reputation: 857

Add Column to table with jQuery

Is it possible to add a column to an existing table like this:

<table id="tutorial" width="600" border="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

with js?

Upvotes: 25

Views: 56866

Answers (4)

passer
passer

Reputation: 644

You mean column not row?

$('#tutorial tr').each(function()
{
    $(this).append('<td></td>');
});

Which selects the <tr> element inside id "tutorial" (that is your table is this case) and append new contents behind its original contents

Upvotes: 3

Nopesound
Nopesound

Reputation: 510

An alternative option to those above is to create the column together with the other and a style of display:none; and then using the method .Show() to display.

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176896

you can do like this 

 $('#tutorial').find('tr').each(function(){
        $(this).find('td').eq(n).after('<td>new cell added</td>');
   });

n can be replaced by the number after which column you want to add new column

Upvotes: 47

Arun P Johny
Arun P Johny

Reputation: 388316

You can use .append() to append a new td to the rows

$('#tutorial tr').append('<td>new</td>')

Demo: Fiddle

Upvotes: 27

Related Questions