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

У меня есть следующее:

<table>
  <tr><td>author first name</td><td>author 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>

и каждый раз, когда я нажимаю тег ссылки на 'add author', я хочу создать дополнительную таблицу таблиц, такую как:

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

Я посмотрел на .append(), и я точно не знаю, как использовать его для моей ситуации. И я хотел бы иметь возможность добавлять бесконечное количество новых строк таблицы. Как это сделать?

Ответ 1

Во-первых, исправьте свой HTML как:

<table class="authors-list">
    <tr>
        <td>author first name</td><td>author 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 в качестве доказательства.

Ответ 2

Отметьте здесь.

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

Ответ 3

Дайте идентификатор вашей таблице, предположим, my_table и id для якоря, предположим, что my_button попробует следующее:

Ваш измененный код:

<table id="my_table">
<tr><td>author first name</td><td>author 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>

И добавьте ниже script после включения библиотеки 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;

  }
}