我有以下代码可以在点击时动态添加行:
<script language="javascript">
jQuery(function(){
var counter = 1;
jQuery('a.add-author').click(function(event){
event.preventDefault();
counter++;
var newRow = jQuery('<tr><td><input type="text" name="first_name' +
counter + '"/></td><td><input type="text" name="last_name' +
counter + '"/></td></tr>');
jQuery('table.authors-list').append(newRow);
});
});
</script>
<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>
代码在jsFiddle中工作正常,但是当我将它复制到我的记事本中,并尝试从WAMP服务器运行它时,它不起作用。
另一个问题:如何在每行旁边添加删除行按钮,以便在点击后删除该行?
答案 0 :(得分:3)
您确定已将JQuery正确加载到HTML文件中吗? JQuery可以在JSFilde中加载,但可能在您的项目中缺失。
答案 1 :(得分:3)
第二个问题的答案(代码略有改动):
$(function() {
var $table = $('table.authors-list'),
counter = 1;
$('a.add-author').click(function(event){
event.preventDefault();
counter++;
var newRow =
'<tr>' +
'<td><input type="text" name="first_name' + counter + '"/></td>' +
'<td><input type="text" name="last_name' + counter + '"/></td>' +
'<td><a class="remove">remove</a></td>'
'</tr>';
$table.append(newRow);
});
// Remove rows on click
$table.on('click', '.remove', function() {
$(this).closest('tr').remove();
});
});
因此,删除行的最佳方法是在某些remove
- 链接上侦听点击事件并删除相应的父行。
答案 2 :(得分:1)
在<script>
标记之前添加以下代码行:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
这会将jQuery库加载到您的网页中,让您使用jQuery
或$
对象的所有功能和属性。
答案 3 :(得分:0)
回答您的第一个问题: 请向我们提供进一步的信息......这个问题可能有几个原因造成的。
回答您的第二个问题:
您可以将名为“remove_button”的删除按钮附加到名为“newRow”的变量中,并为其添加ID(即id="remove_button_" + counter
)。
当点击删除按钮时,调用一个提取按钮ID号的功能,并使用remove()
功能删除具有相同编号的其他元素