Suppose i have an HTML table. How do I use JQuery events on this?

Question

<table>
    <tr class="myRow"><td class="col1"></td><td class="col2"></td></tr>
    <tr class="myRow"><td class="col1"></td><td class="col2"></td></tr>
    <tr class="myRow"><td class="col1"></td><td class="col2"></td></tr>
    <tr class="myRow"><td class="col1"></td><td class="col2"></td></tr>
    <tr class="myRow"><td class="col1"></td><td class="col2"></td></tr>
</table>

How do I make the appropriate col1 fill with the letters "ABC" when the user rollovers the row?

And then disappear the "ABC" when the user moves the mouse away from that row?

So far, I got this. I solved it.

  $(".ep").hover(function(){
        $(this).find('td.playButtonCol').html('PLAY');
    },function(){
        $(this).find('td.playButtonCol').html('');
    });

Answer 1

Use the mouseenter and mouseleave events.

$('.col1').mouseenter(function(){ ... });
$('.col1').mouseleave(function(){ ... });

Answer 2

you means something like this?:

$('.col1').hover(function() {
    $(this).html('ABC');
}, function() {
    $(this).html('');
});

Answer 3

    $(".col1").hover(
function(){
 $(this).html = ('abc');
    )};

Answer 4

Your question is a little vague but if I understand you correctly you want to hover over a row and put a value in one particular cell in that row. If so, that's relatively easy:

$("tr").hover(function() {
  $(this).children(".col1").html("ABC");
}, function() {
  $(this).children(".col1").html("");
});