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

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