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

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（只是要确保没有其他链接influented）的链接，增加数量在每个插入字段名称的名称末尾加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; 

    } 
}