如何在使用jQuery按钮单击时添加额外的html表格行？

I have the following:

我有以下内容:

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

and each time I click the link tag to 'add author', I want to create an extra table row like the following:

每次我点击链接标签“添加作者”时,我想创建一个额外的表格行,如下所示:

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

I looked at .append() and I'm not sure exactly how to use it for my situation. And I'd like to be able to add infinite amount of new table rows. How do I do this?

我看了.append(),我不确定如何在我的情况下使用它。我希望能够添加无限量的新表行。我该怎么做呢?

3 个解决方案

#1

Firstly, correct your HTML as:

首先,将您的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>

(I have added indents only for visibility) and do not use inline JavaScript. Plus, be consistent, preferably use " (double quotes) for HTML attributes, ' (single quotes) for JavaScript strings.

(我仅为可见性添加了缩进)并且不使用内联JavaScript。另外,要保持一致,最好使用“(双引号)HTML属性,”(单引号)JavaScript字符串。

Second, do something like that:

其次,做那样的事情:

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

    });
});

It will add a row to the table with each click on the link having class add-author (just to be sure no other link is influented), incrementing number at the end of the name of every inserted field's name by 1. The row will be inserted at the end of the table having class authors-list (same reason as with class for a link). See this jsfiddle as a proof.

它会在每次点击带有类add-author的链接时向表中添加一行(只是为了确保没有其他链接受到影响),将每个插入字段名称末尾的数字增加1。该行将在具有类authors-list的表的末尾插入(与链接的类相同的原因)。看到这个jsfiddle作为证明。

#2

Check it out here.

看看这里。

You'll probably want to increase the number in the name attributes in each iteration.

您可能希望在每次迭代中增加名称属性中的数字。

#3

Give an id to your table, suppose my_table and an id to the anchor a suppose my_button then try the below:

给你的表一个id,假设my_table和一个id到锚点,假设my_button然后尝试下面的:

Your modified code:

你修改过的代码:

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

And add the below script after including the jquery library in your page.

在页面中包含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;

  }
}

#1