Is there a way to dynamically change an image in a column when hovering over a table row that was added through a button function?
Here is the current code that I am using, but it does not seem to work as intended when I hover over the row.
This function adds a new row to the table:
function addNewRow()
{
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 Code:
$(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'));
});
});