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的表的末尾（与链接的类相同的原因）。请参阅this jsfiddle作为证据。

Answer 2

查看here。

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

Answer 3

给你的表一个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;

  }
}

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

3 个答案: