Show table cell in row pointer row

Question

I have a table that looks something like this.

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr class="data">
      <td>Info here</th>
      <td><a href"/url_here" class="edit">Edit</a></td>
    </tr>
    <tr class="data">
      <td>More here</th>
      <td><a href"/url_here" class="edit">Edit</a></td>
    </tr>
  </tbody>
</table>

I want to show the "Edit" link when you hover over any of the lines inside. I tried several ways to do this, but continue to run into the same problem. Assuming I'm just thinking about it wrong.

This is what I have.

$('a[class*=edit]').hide(); 

$('tr[class*=data]').bind("mouseover", function(e) {
  $(e.target).closest('a[class*=edit]').addClass("selected");
  $('a[class*=selected]:first').show();
}).mouseout(function() {
  $('a[class*=selected]').hide();
  $('a[class*=edit]').removeClass("selected");
})

The problem with existing code is that it does not add the selected class unless you directly point to the edit link. As I mentioned above, I need it to add the selected class when you hover over any point on this line. I also want it to display an edit link for this particular line.

, , , , , - . !

Answer 1

:

• , $() jQuery, , CSS, . , , , , . , =* edit . , abceditabc . jQuery , , . , ​​ a.edit, jQuery , .
• , , , this , . , e.target.
• , , , , e.target, sibling td. closest td tr, td . , , , , . , , .

, , , :

$(function() {
    $('a.edit').hide(); // hide all links with a class of edit
    // act upon all table rows with a class of data
    $('tr.data').hover(function() {
        // at this point, 'this' is the table row that is being hovered
        // we can use the find function to locate the link with a class of edit
        // then add a class to it and show it.
        $(this).find('a.edit').addClass("selected").show();
    }, function() {
        // the second argument of the hover function is what should happen
        // when the mouse hovers out of the table row. In this case, we want
        // to find the link again, remove the class, and hide it.
        $(this).find('a.edit').removeClass("selected").hide();
    });
});

, HTML, . FF, IE.

:

• jQuery. , .
• jQuery Firefox/Firebug. console.log(this); , , , - , .

Answer 2

- , , .

$(document).ready(function() {
  $('a.edit').hide(); 
  $('tr.data').hover(function() {  
    $(this).addClass("selected").find('a.edit').show();
  }, function() {  
    $(this).removeClass("selected").find('a.edit').hide();
 });
}):

, , , closest, UP .

: , , , jquery document.ready. .