Как добавить дополнительную строку html-таблицы после нажатия кнопки, используя jQuery?

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 как:

<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 (по той же причине, что и с классом для ссылки). См. этот jsfiddle в качестве доказательства.

Answer 2

Проверьте это здесь .

Возможно, вы захотите увеличивать число в атрибутах имени на каждой итерации.

Answer 3

Дайте идентификатор вашей таблице, предположим, что my_table и идентификатор привязки, предположим, 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;

  }
}