CODEWITHSUNDEEP
javascriptjqueryhtml
vkfjs
vkfjs

Reputation: 101

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>"));
  });

});

Upvotes: 0

Views: 8668

Answers (4)

Ahmet Can G&#252;ven
Ahmet Can G&#252;ven

Reputation: 5462

Actually your add row is not true for the solution you wanted.

  • Fixed your row addition
  • Fixed contenteditable attribute for every cell

$(function(){
  $("#addrow").click(function(){
    var tr = "<tr>" + "<td contenteditable='true'></td>".repeat($("#myTable tr:eq(0) td").length) + "</tr>"
    $("#myTable").append(tr);
  });
  $("#addcolumn").click(function(){
    $("#myTable tr").append($("<td contenteditable='true'></td>"));
  });
});
table,tr,td
{
  border: 1px solid gray;
  border-collapse: collapse;
  padding:10px;
  margin-bottom:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

  <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">
  </body>
</html>

Upvotes: 2

Hoang Vu
Hoang Vu

Reputation: 363

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

Upvotes: 3

dimlucas
dimlucas

Reputation: 5141

You can do it using the vanilla JS method document.createElement in conjuction with jQuery's .append:

  $("#addcolumn").click(function(){
    $("#myTable tr:last").append(document.createElement('td'));
  });

Check this fiddle for a live demo

Upvotes: 1

reza
reza

Reputation: 1507

Change your addcolumn click function as below

$("#addcolumn").click(function(){
    $("#myTable tr").append($("<td></td>"));

  });

Hope this helps

Upvotes: 0

Related Questions