Raghavi
Raghavi

Reputation: 321

How to insert cells in existing rows dynamically

enter image description hereI am new to jquery and javascript.Here if the checkbox is selected in the first table ,I am adding the rows to the second table but I need some extra cells also in the same row. I am trying like this. It duplicates the cells everytime. I have included the screenshot of the output. Can anyone please help me. Thanks in advance.

 function table2()
{
$('#one').on("click", function(){
    $('#one tbody input:checked').parent().parent().appendTo("#two");
  $('#two tr').append('<td>  </td>','<td> </td>','<td> </td>', '<td> </td>','<td> </td>','<td> </td>','<td> </td>','<td> </td>','<td> </td>');
});

https://jsfiddle.net/95uq7pz3/

Upvotes: 0

Views: 410

Answers (1)

JFC
JFC

Reputation: 586

So it's pretty simple, you just need to pass through every row (tr) and append a td to it.

$('button').click(function() {
  $('table').find('tr').each(function(i) {
    $(this).append('<td>' + i + '</td>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>_0</td>
  </tr>
  <tr>
    <td>_1</td>
  </tr>
</table>
<br>
<button>Add a column</button>

Upvotes: 1

Related Questions