が動的に

Question

私はワンクリックで新しいブートストラップ行を追加したい行を追加し、私はこれを試してみましたが、私は数だけではなく、完全な行のコピーで新しい行を取得する：

<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> 

スクリプト：

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

2つのドロップダウンと1つのフィールドを持つ行ではなく、行の数だけ新しい行を追加するのはなぜですか？ ありがとうございます！

Answer 1

あなたが渡したことが単に"<td>"+ (i+1) +"</td>"にあるためです。

あなたが追加したすべての行のデフォルト行#addr0のコンテンツを追加することができます。このことができます

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

希望を。あなたが新しい行に、以前のHTMLコードを取得する必要があります

$(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

。

<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> 

IDを使用して値を取得するか、配列を使用します。