javascript - 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.

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

});

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

http://jsbin./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>"));
  });

});

Share Improve this question asked Nov 18, 2016 at 9:20 vkfjs 1012 silver badges11 bronze badges

1 problem is in adding coloum so you have to append each row from start to end . using each method – Mahi Commented Nov 18, 2016 at 9:28
jsfiddle/5QkUA/2 – Mahi Commented Nov 18, 2016 at 9:46

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

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

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./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./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>

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

Change your addcolumn click function as below

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

  });

Hope this helps

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to add columns in the table using jquery? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)