Add row dynamically

Question

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 1

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>

Answer 2

You have to get previous HTML code into new row.

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

    });
</script>

Also use ID to get their value or using an arrays.