首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何通过单击同一行上的列中的图像来删除行?

如何通过单击同一行上的列中的图像来删除行?
EN

Stack Overflow用户
提问于 2013-06-28 16:28:10
回答 2查看 612关注 0票数 1

如何通过单击同一行上的列中的图像来删除行?

这是用于添加行的代码

代码语言:javascript
复制
function addrow() {
    var table = document.getElementById("tablelist");
    var row = table.insertRow(-1);
    var cells = new Array();
    for (var i = 0; i < 6; i++) {
        cells[i] = row.insertCell(i);
        cells[i].innerHTML = "New";
    }
    cells[6] = row.insertCell(6);
    cells[6].innerHTML = '<img id="pencil" src="images/pencil-black.png"></img><img id="lock" src="images/lock-black.png"></img><img id="bin" src="images/bin-black.png"></img>';
}

这是我的jquery代码,但它不能工作。

代码语言:javascript
复制
$(document).ready(function() {
    $(".userbox").on({
        mouseenter : function() {
            $(this).find('img').each(function() {
                $(this)
                .attr(
                    'src',
                    $(this).attr('src').replace('-black.png',
                                                '-white.png'));
            });
        },
        mouseleave : function() {
            $(this).find('img').each(function() {
                $(this)
                .attr(
                    'src',
                    $(this).attr('src').replace('-white.png',
                                                '-black.png'));
            });
        }
    }, 'tr');

    $("tr").on('tr', '.bin', function() {
        $(this).slideUp();
    });

});

注意:我知道.slideUp()不会删除一行。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-06-28 16:31:58

id在文档中必须是唯一的,因此需要将其更改为class属性

然后,您需要使用委托事件注册

代码语言:javascript
复制
$('#tablelist').on('click', '.bin', function(){
    $(this).closest('tr').slideUp();
})

演示:Fiddle

票数 3
EN

Stack Overflow用户

发布于 2013-06-28 16:42:14

代码语言:javascript
复制
$('table').on('click', 'img', function() {
  $(this).closest('tr').remove();
});

ps在tr元素上slideUp()动画不起作用

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17360414

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档