当我将鼠标悬停在通过按钮功能添加的表行上时，如何更改列中的图像

How do I change an image from a column when I hover over a table row that was added via a button function?

本文关键字：图像 何更改 添加 悬停 鼠标 功能 按钮      更新时间：2023-09-26

当我将鼠标悬停在通过按钮功能添加的表行上时，如何更改列中的图像？

以下是我当前的代码，当我将鼠标悬停在该行上时，它不起作用。

这是我在表中添加一行的函数

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 src="images/pencil-black.png"></img><img src="images/lock-black.png"></img><img src="images/bin-black.png"></img>';
        }

jquery:

$(document).ready(function(){
$(".userbox td").hover(function() {
var $img = $(this).find("img");
$img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
}, function() {
    var $img = $(this).find("img");
    $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
});  
});

当document.ready正在运行时，addrow()函数添加的元素还不存在于DOM中。

使用jQuery on:

$(".userbox").on({
    mouseenter: function()  {
         var $img = $(this).find("img");
         $img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
    },
    mouseleave: function() {
        var $img = $(this).find("img");
        $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
    }
}, 'td');

或者，您可以在创建元素时绑定事件：

var tdOnMouseOver = function()
    {
    var $img = $(this).find("img");
    $img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
    }
var tdOnMouseOut = function()
    {
    var $img = $(this).find("img");
    $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
    }
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[i].onmouseover = tdOnMouseOver;
        cells[i].onmouseout = tdOnMouseOut;
        }
     cells[6]=row.insertCell(6);
     cells[6].innerHTML='<img src="images/pencil-black.png"></img><img src="images/lock-black.png"></img><img src="images/bin-black.png"></img>';
    }

UPDATE（因为您使用的是jQuery 1.6）：

使用jQuery live:

$(".userbox td").live({
    mouseenter: function()  {
         var $img = $(this).find("img");
         $img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
    },
    mouseleave: function() {
        var $img = $(this).find("img");
        $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
    }
});

使用$（'#tablelist'）.on（'mouseover mouseout'，'img'，function（e）{}）

您需要将委托事件用于动态添加元素上的事件：

$(document).ready(function(){
    $(".userbox").on({
        mouseenter: function() {
            var $img = $(this).find("img");
            $img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
        }, 
        mouseleave: function() {
            var $img = $(this).find("img");
            $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
        }, 'td');
    });
});
相关文章：