CODEWITHSUNDEEP
javascriptjquery
furiabhavesh
furiabhavesh

Reputation: 415

Attaching event handler to each table cell at runtime

I have created a table at design time and adding rows to it at runtime. I want to attach a mouseover event to each row of first column which displays the respective tooltip.

for(ctr=0;ctr<noOfRows;ctr++){
   var myTable=document.getElementById("myTable");
   var newRow = myTable.insertRow(1);

   var cell0 = newRow.insertCell(0);
   cell0.innerHTML="Cell Data"+"<div class='hiddenToolTip' id='tip"+ctr+"'>"+tooltip+"</div>";

   cell0.onmouseover=function(){
        $("#tip"+ctr).show('blind',500);
   };

   cell0.onmouseout=function(){
        $("#tip"+ctr).hide();
   };
}

The problem is that the 'ctr' variable is always coming as the highest value inside 'onmouseover' and 'onmouseout' function.

Upvotes: 1

Views: 348

Answers (1)

Pranay Rana
Pranay Rana

Reputation: 176934

just pass this in function argument and get value of ctrl as below using id of the element 

cell0.onmouseover=function()
{      
    $(this).children("div[id^='tip'] ").show('blind',500);    
    };

Check this example for this : Javascript: Adding OnMouseOver And OnMouseOut Using DOM

Upvotes: 2

Related Questions