我有以下
<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>
解决方法
首先,将您的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.另外,要保持一致,最好为JavaScript字符串使用“(双引号)HTML属性”(单引号).
第二,做这样的事情：
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);
});
});
它将添加一行到表,每一次点击链接有类添加作者(只是为了确保没有其他链接影响),每个插入字段的名称的名字的末尾增加数字1.行将被插入到具有类作者列表的表的末尾(与链接的类相同的原因).见this jsfiddle作为证明.
