2

ボタン機能を介して追加されたテーブル行にカーソルを合わせたときに、列から画像を変更するにはどうすればよいですか?

以下は、行にカーソルを合わせると機能しない現在のコードです。

これは、テーブルに行を追加する私の関数です

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'));
});  
});
4

3 に答える 3

2

が実行されているとき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'));
    }
});
于 2013-06-27T08:21:12.737 に答える
0

$('#tablelist').on('mouseover mouseout','img',function(e){}) を使用します

于 2013-06-27T08:14:06.090 に答える