Jquery 删除表行不起作用
基本上是单击按钮生成表行,然后单击减号按钮删除行。
我尝试了以下几种方法,但都不起作用。 -.绑定 -。居住 -正常方式
由于表是动态生成的,它似乎不起作用。
<script language="JavaScript" src="jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var html = '';
var rows= 5;
var cols= 4;
$('#btnGenTable').bind("click", function() {
for (var r = 1; r <= rows; r++)
{
html += '<tr>';
for (var c = 1; c <= cols; c++)
{
cellText= "row " + r + " col " + c;
html += '<td>aa</td>';
}
html+= '<td><img class="delete" src="minus.jpg" /></td>';
html += '</tr>';
};
$('.inner').html('').append(html);
});
$('table tbody tr td img.delete').click(function(){
alert('clicked');
$(this).parent().parent().remove();
});
});
</script>
<br />
<table id="tblsize" class="inner" border="1" width="80%">
</table>
<input type=button value="Generate Table" name="btnGenTable" id="btnGenTable" class=text100>
Basically is to click button to generate table row, then click minus button to remove row.
I have tried it with a few ways below, non of it work.
-.bind
-.live
-normal way
It seems like it is not working due to the table is generated dynamically.
<script language="JavaScript" src="jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var html = '';
var rows= 5;
var cols= 4;
$('#btnGenTable').bind("click", function() {
for (var r = 1; r <= rows; r++)
{
html += '<tr>';
for (var c = 1; c <= cols; c++)
{
cellText= "row " + r + " col " + c;
html += '<td>aa</td>';
}
html+= '<td><img class="delete" src="minus.jpg" /></td>';
html += '</tr>';
};
$('.inner').html('').append(html);
});
$('table tbody tr td img.delete').click(function(){
alert('clicked');
$(this).parent().parent().remove();
});
});
</script>
<br />
<table id="tblsize" class="inner" border="1" width="80%">
</table>
<input type=button value="Generate Table" name="btnGenTable" id="btnGenTable" class=text100>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
要在单击图像时删除行,请在 $(document).ready 块中插入以下代码。
To remove a row when the image is clicked insert the following code in your $(document).ready block.
我知道这个问题很老了,但我也遇到了同样的问题。 live() 方法从 jQuery 1.7 版开始已被弃用,并将在 1.9 版中删除。你可以用这个代替:
I know this question is old but I had the same problem. The live() method is deprecated now since jQuery version 1.7 and will be removed in version 1.9. You could use this instead:
您所需要的只是:
在您的文档中准备好处理程序。
这是一个工作示例:
http://jsfiddle.net/5bWcT/
all you need is:
in your document ready handler.
here's a working example:
http://jsfiddle.net/5bWcT/