vkfjs vkfjs - 18 days ago 5
Javascript Question

how to add columns in the table using jquery?

I have tried to copy the existing column and it append to end of the column. Please advise.

http://jsbin.com/hucifuwuwo/1/edit?html,js,output

<table id="myTable" cell>
<tbody>
<tr id="test"><td contenteditable="true"></td><td contenteditable="true">Names</td></tr>
</tbody>
</table>
<input id="addrow" type="button" value="Add Row">
<input id="addcolumn" type="button" value="Add Column">
$(function(){
$("#addrow").click(function(){
$("#myTable tr:last").after($("<tr><td></td><td></td></tr>"));
});
$("#addcolumn").click(function(){
$("#myTable tr:last").append($("<tr><td></td><td></td></tr>"));
});

});

Answer

I'm not too quite sure what your question is but this code might do it, lemme know what exactly u need:

$(function(){
  $("#addrow").click(function(){
    $("#myTable tr:last").after("<tr></tr>");
    $("#myTable tr:nth-child(1) td").each (function (){
    $("#myTable tr:last").append("<td></td>")
    });    
  });
  $("#addcolumn").click(function(){
    $("#myTable tr").append("<td></td>");
  });  
});

Link to JSbin