Eman Shaltout
Eman Shaltout

Reputation: 105

How can I detect each tr in js?

I need to change the colour of the button when I hover over the tr for example when hover over the first row, the button in it should have a different background colour than the other buttons.
this HTML code:

   <tr onmouseover="hoverMe()" onmouseout="outMe()">
    <input type="button" class="btn-table-book" value="book">
    </tr>
  <tr onmouseover="hoverMe()" onmouseout="outMe()">
    <input type="button" class="btn-table-book" value="book">
    </tr>
   <tr onmouseover="hoverMe()" onmouseout="outMe()">
    <input type="button" class="btn-table-book" value="book">
    </tr>   

java script code

<script>
     function hoverMe(){
            $(".btn-table-book").css("background-color","#F0562B");
         $(".btn-table-book").css("color","#FFF");};
  function outMe(){

         $(".btn-table-book").css("background-color","#DDD");
         $(".btn-table-book").css("color","#222");
       };

after I run this code when I hover over any tr all button's colour change at the same time and I don't need this.

Upvotes: 1

Views: 62

Answers (2)

Jesus Walker
Jesus Walker

Reputation: 144

If i understand your question what you need is this:

$('#tableId').find('tr').each(function(i){
     $(this).css("background-color","#DDD");
     $(this).css("color","#FFF");

     $(this).hover(function(){
          $(this).css("background-color","#F0562B");
          $(this).css("color","#222");
     });
  });

This will loop inside the first element and it will add the hover functionallity to each on of your tr elements.

Upvotes: -1

Daniel Beck
Daniel Beck

Reputation: 21505

The :hover doesn't have to be on the last element of the selector. Here's how to do that in plain CSS:

tr .btn-table-book {
    background-color: #DDD;
    color: #222;
}
tr:hover .btn-table-book {
    background-color: #F0562B;
    color: #FFF
}

Upvotes: 3

Related Questions