CODEWITHSUNDEEP
javascripthtmlcss
meisterburger
meisterburger

Reputation: 31

Highlight the row of a table on mouseover using Javascript and CSS

Below is are the functions I'm using in order to highlight a row being hovered over.

I am having trouble understanding how this can be achieved when my goal is to select the tbodies from the stripe_table class. Once this is set as the event listener, I need to have the a and td nodeNames respond to the mouseover event and thus highlight their parent row.

Can someone explain the steps that would allow this to be accomplished? How would I traverse the DOM from the hovered a or td element to find its parent row?

Thanks!

Set tbody as eventlistener on mouseover and mouseout reacts to a and td elements-->modifies tr --find the target element’s ancestor table row --so that you apply the highlighting to that table row --To traverse the DOM run a loop that resets the event --target element to its parent node until the node name of the --parent is equal to On mouseout event, need to restore the formatting*/

//Set up Hover Events

function addEvent( obj, type, fn ) {

    if ( obj.attachEvent ) {
         obj['e'+type+fn] = fn;
         obj[type+fn] = function(){obj['e'+type+fn] ( window.event );}
         obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
         obj.addEventListener(type, fn, false);
    }

    function setUpFieldEvents(){
         var stripeTables = document.getElementsByClassName("stripe_table");
         var tableBodies = stripeTables.tBodies;

             addEvent(tableBodies, "mouseover", hoverHighlight);
             addEvent(tableBodies, "mouseout", undoHighlight);
    }

    function hoverHighlight(){
            var stripeTables = document.getElementsByClassName("stripe_table");
            var tableBodies = stripeTables.tBodies;
            var tableData = tableBodies.getElementsByTagName("td");
    }

    function undoHighlight(){

    }

Upvotes: 3

Views: 27150

Answers (3)

echochamber
echochamber

Reputation: 1815

Probably can just use css hover

Other option is using javascript (or jquery) .mouseover (.mouseenter .mouseleave are probably what you are looking for)

edit:

$('tbody#tbodyId tr').mouseenter(function(){/*do stuff */});

So if you wanted to change color I'd do something like

$('tbody#tbodyId tr').mouseenter(function(){
$(this).css('background') = 'red';
});

$('tbody#tbodyId tr').mouseleave(function(){
$(this).css('background') = /*whatever old color was */
});

Upvotes: 1

Hunter
Hunter

Reputation: 146

If you want, jQuery makes it easy.

HTML:

<table>
    <tbody class="stripe_table">
        <tr>
            <td>One</td>
            <td>Two</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Three</td>
            <td>Four</td>
        </tr>
    </tbody>
</table>

JS:

$('.stripe_table').hover(
  function() {
    $(this).addClass('highlight');
  }, function() {
    $(this).removeClass('highlight');
  }
)

CSS:

.highlight{
    background:red;
}

jsFiddle: http://jsfiddle.net/kB7u2/1/

Upvotes: 1

SW4
SW4

Reputation: 71150

Have you tried just using the CSS e.g.

tr:hover{
 background:red;
}

If you want to use jQuery, there's a pretty decent walkthrough here, if you want pure JS- take a look here under the section 'Using Mouse Event Handler and Row Detection'

Upvotes: 19

Related Questions