John John - 1 year ago 64
jQuery Question

Add row dynamically

I want to add a new bootstrap row with one click, I tried this, but I only get a new row with number, not the copy of a 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:

$(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--;
}
});
});


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>