web-dev-qa-db-ja.com

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

私は以下を持っています:

<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()を見ましたが、自分の状況でそれをどのように使用するか正確にわかりません。そして、新しいテーブル行を無制限に追加できるようにしたいと思います。どうすればよいですか?

12
Simon Suh

まず、HTMLを次のように修正します。

<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を使用しないでください。さらに、一貫性を保ち、HTML属性には"(二重引用符)、JavaScript文字列には'(単一引用符)を使用することをお勧めします。

次に、そのようなことをします:

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

    });
});

add-authorクラスのリンクをクリックするたびにテーブルに行が追加され(他のリンクが影響を受けていないことを確認するため)、挿入されたすべてのフィールドの名前の末尾に1ずつ番号が増えます。行は、クラスauthors-listを持つテーブルの最後に挿入されます(リンクのクラスと同じ理由)。証明として this jsfiddle を参照してください。

14
Tadeck

それをチェックしてください ここ

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

3
Shomz

テーブルに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ライブラリを組み込んだ後、以下のスクリプトを追加します。

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

  }
}
0
Ghost-Man