John John - 1 year ago 50
jQuery Question

Add a row to a table dynamically

I want to add new bootstrap row with one click, I try these, but I only get new row with number, no the copy of complete row

<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">Comment</th>
<th class="text-center">Price</th>
<th class="text-center">Type</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
<td>
<br>
<div class="smart-widget sm-right ">
<label for="cop" class="field prepend-icon required-field">
Price
<input type="text" name="cop" id="cop" class="gui-input"></label>
</div>
</td>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<label for="client" class="control-label">Type</label>
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
</tr>
<tr id='addr1'></tr>

</tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>


Script:

<script>
$(document).ready(function(){
var i=1;

$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td>")

$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});

$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
);
});
</script>


Why only add new row with number of row instead of row with two dropdowns and one field?
Thanks in advance!

Answer Source

Simply because that what you have passed in "<td>"+ (i+1) +"</td>".

You could add the content of default row #addr0 in every row you add :

$('#addr'+i).html($('#addr0').html());

Hope this helps.

$(document).ready(function(){
  var i=1;
  $("#add_row").click(function(){
    $('#addr'+i).html($('#addr0').html());

    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++;
  });
  $("#delete_row").click(function(){
    if(i>1){
      $("#addr"+(i-1)).html('');
      i--;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table class="table table-bordered table-hover" id="tab_logic">
  <thead>
    <tr>
      <th class="text-center">
        Comment
      </th>
      <th class="text-center">
        Price
      </th>
      <th class="text-center">
        Type
      </th>
    </tr>
  </thead>
  <tbody>
    <tr id='addr0'>
      <td>
        <div class="smart-widget sm-right ">
          <label for="client" class="field prepend-icon required-field">
            <select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
          </label>
        </div>
      </td>
      <td>
        <br>
        <div class="smart-widget sm-right ">
          <label for="cop" class="field prepend-icon required-field">
            Price
            <input type="text" name="cop" id="cop" class="gui-input">
          </label>
        </div>
      </td>
      <td>
        <div class="smart-widget sm-right ">
          <label for="client" class="field prepend-icon required-field">
            <label for="client" class="control-label"> Type</label>
            <select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
          </label>
        </div>
      </td>
    </tr>
    <tr id='addr1'></tr>

  </tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>