jQueryを使用してボタンクリック時に追加のhtmlテーブル行を追加するにはどうすればよいですか？

Question

私は、次のしている：

<table> 
    <tr><td>author's first name</td><td>author's last name</td></tr> 
    <tr><td><input type='text' name='first_name' /></td><td><input type='text' name='last_name' /></td></tr> 
</table> 
<a href='' onclick='return false;'>Add Author</a> 

と、私は「作者を追加する」にリンクタグをクリックするたびに、私は次のような余分なテーブルの行を作成したい：

<tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr> 

私が見.append（）と私は私の状況のた​​めにそれを使用する方法を正確にはわかりません。そして、無限の量の新しいテーブル行を追加できるようにしたいと思います。これはどうすればいいですか？

Answer 1

まず、としてあなたのHTMLを修正します。さらに、HTML属性には"（二重引用符）、JavaScript文字列には'（一重引用符）を使用することをお勧めします。各クラスadd-authorを（ちょうど他のリンクがinfluentedされていないことを確認するように）を有するリンクをクリックで番号をインクリメントし、それが持つテーブルに行を追加します

jQuery(function(){ 
    var counter = 1; 
    jQuery('a.add-author').click(function(event){ 
     event.preventDefault(); 

     var newRow = jQuery('<tr><td><input type="text" name="first_name' + 
      counter + '"/></td><td><input type="text" name="last_name' + 
      counter + '"/></td></tr>'); 
      counter++; 
     jQuery('table.authors-list').append(newRow); 

    }); 
}); 

：

第二には、そのような何かを行います挿入された各フィールドの名前の終わりが1で終わります。行はクラスauthors-listのテーブルの最後に挿入されます（リンクのクラスと同じ理由）。証明として、this jsfiddleを参照してください。

Answer 2

hereを確認してください。

おそらく、各反復で名前属性の数を増やしたいと思うでしょう。

Answer 3

あなたのテーブルにIDを与えるには、MY_TABLEと仮定してアンカーへのidは考えmy_buttonというは、以下試してください。

あなたの修正コード：

<table id="my_table"> 
<tr><td>author's first name</td><td>author's last name</td></tr> 
<tr><td><input type='text' name='first_name' /></td><td><input type='text' name='last_name' /></td></tr> 
</table> 
<a id="my_button" href='#'>Add Author</a> 

を含むとした後、以下のスクリプトを追加しますあなたのページのjqueryライブラリ

<table class="authors-list"> 
    <tr> 
     <td>author's first name</td><td>author's last name</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" name="first_name" /> 
     </td> 
     <td> 
      <input type="text" name="last_name" /> 
     </td> 
    </tr> 
</table> 
<a href="#" title="" class="add-author">Add Author</a> 

（私は唯一の可視性のためにインデントを追加している）とインラインJavaScriptのを使用しないでください：

$(document).ready(function() 
{ 
    new_row="<tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr>"; 
    $("#my_button").click(function() 
    {  
    $("#my_table").append(new_row); 
    return false; 

    } 
}