Jquery 删除表行不起作用

发布于 2024-09-29 07:40:56 字数 1112 浏览 8 评论 0原文

基本上是单击按钮生成表行,然后单击减号按钮删除行。

我尝试了以下几种方法,但都不起作用。 -.绑定 -。居住 -正常方式

由于表是动态生成的,它似乎不起作用。

<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

半世晨晓 2024-10-06 07:40:56

要在单击图像时删除行,请在 $(document).ready 块中插入以下代码。

$('img.delete').live('click', function() {
    $(this).parent().parent().remove();
});

To remove a row when the image is clicked insert the following code in your $(document).ready block.

$('img.delete').live('click', function() {
    $(this).parent().parent().remove();
});
秋凉 2024-10-06 07:40:56

我知道这个问题很老了,但我也遇到了同样的问题。 live() 方法从 jQuery 1.7 版开始已被弃用,并将在 1.9 版中删除。你可以用这个代替:

$(document).on('click', '.delete', function(){
    $(this).closest('tr').remove();
});

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:

$(document).on('click', '.delete', function(){
    $(this).closest('tr').remove();
});
九命猫 2024-10-06 07:40:56

您所需要的只是:

  $('.delete').live('click', function(){
          $(this).closest('tr').remove();   
      });

在您的文档中准备好处理程序。

这是一个工作示例:
http://jsfiddle.net/5bWcT/

all you need is:

  $('.delete').live('click', function(){
          $(this).closest('tr').remove();   
      });

in your document ready handler.

here's a working example:
http://jsfiddle.net/5bWcT/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文