John John - 5 months ago 12
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

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>