新しく生成されたものに親の名前とテキストボックスのIDを追加する

Question

リンクのクリック時に変数を入力するために、textboxesをさらに生成することができます。私が気づいたのは、テキストボックスの新しい行が生成されたときです。nameのテキストとIDをidとして生成します。しかし、私はそれが元のテキストボックスまたは親のテキストボックスと同じ名前を持つことを望みます。

<table width="80%" border="0" align="center" cellpadding="5" cellspacing="5"> 
    <tr> 
    <td bgcolor="#CCCCFF"><strong>4. VECHICLE INFORMATION</strong></td> 
    <td bgcolor="#CCCCFF">&nbsp;</td> 
    <td bgcolor="#CCCCFF">&nbsp;</td> 
    <td bgcolor="#CCCCFF"><div align="right"><a class="add_more" href="#">Add More Vechicles</a></div></td> 
    </tr> 
    <tr id="more_vechicle"> 
    <td bgcolor="#FFFFFF"><input type="text" name="vechicle_name[]" id="vechicle_name" class="register-input" placeholder="Name of Vechicle" /></td> 
    <td bgcolor="#FFFFFF"><input type="text" name="vechicle_type[]" id="vechicle_type" class="register-input" placeholder="Type of Vechicle" /></td> 
    <td bgcolor="#FFFFFF"><input type="text" name="vechicle_registration[]" id="vechicle_registration" class="register-input" placeholder="Registration No." /></td> 
    <td bgcolor="#FFFFFF"><input type="text" name="vechicle_color[]" id="vechicle_color" class="register-input" placeholder="Color of Vechicle" /></td> 
    </tr> 
    <tr> 
    <td colspan="4" bgcolor="#FFFFFF"><div align="center"> 
     <input type="submit" name="button" id="button" value="Save &amp; Continue" /> 
    </div></td> 
    </tr> 
</table> 

JS

$(document).ready(function() 
    { 
     $('.add_more').click(function(){ 
      var id=$(':text').length; 
      $('#more_vechicle td').append('<input class="register-input" type="text" id='+id+' name="text'+id+'">'); 
     }); 
    }); 

Answer 1

のTDをループに.each()ループを使用してください。それから、各TDにある最初の入力を取得し、複製して新しいIDを与えることができます。

$('.add_more').click(function() { 
 
    $('#more_vechicle td').each(function() { 
 
    var these_inputs = $(this).find(".register-input"); 
 
    var id = these_inputs.length; 
 
    var new_input = these_inputs.first().clone(true).val(''); 
 
    new_input.attr('id', function(i, old_id) { 
 
     return old_id + id; 
 
    }); 
 
    $(this).append(new_input); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="80%" border="0" align="center" cellpadding="5" cellspacing="5"> 
 
    <tr> 
 
    <td bgcolor="#CCCCFF"><strong>4. VECHICLE INFORMATION</strong></td> 
 
    <td bgcolor="#CCCCFF">&nbsp;</td> 
 
    <td bgcolor="#CCCCFF">&nbsp;</td> 
 
    <td bgcolor="#CCCCFF"><div align="right"><a class="add_more" href="#">Add More Vechicles</a></div></td> 
 
    </tr> 
 
    <tr id="more_vechicle"> 
 
    <td bgcolor="#FFFFFF"><input type="text" name="vechicle_name[]" id="vechicle_name" class="register-input" placeholder="Name of Vechicle" /></td> 
 
    <td bgcolor="#FFFFFF"><input type="text" name="vechicle_type[]" id="vechicle_type" class="register-input" placeholder="Type of Vechicle" /></td> 
 
    <td bgcolor="#FFFFFF"><input type="text" name="vechicle_registration[]" id="vechicle_registration" class="register-input" placeholder="Registration No." /></td> 
 
    <td bgcolor="#FFFFFF"><input type="text" name="vechicle_color[]" id="vechicle_color" class="register-input" placeholder="Color of Vechicle" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4" bgcolor="#FFFFFF"><div align="center"> 
 
     <input type="submit" name="button" id="button" value="Save &amp; Continue" /> 
 
    </div></td> 
 
    </tr> 
 
</table>

Answer 2

あなたが探しているソリューションは、jQueryのクローン（）関数（http://api.jquery.com/clone/）です。 #more_vehicleをクローンして、続行ボタンの前に挿入してください。

$('.add_more').click(function() { 
    $('#more_vechicle').clone() 
     .attr('id', null) /* removing id attribute for the cloned 
     * tr so there is only one elemnt with that id 
     */ 
     .insertBefore('#append_anchor'); 

clone（）のデフォルトの動作は、親要素からイベントハンドラをコピーしないことに注意してください。 私はまた、すべての車がそれ自身のtrを取得することを確認することをお勧めします。次のようなフィドルをご覧ください。 https://jsfiddle.net/jcvnos9w/