SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: set row active

  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    set row active

    I have a table, whereby when i hover over any row, that row is set to class=active, and the previous active row is set to class=normal.

    So far i'm doing this with mouseover and mouseout on each row, however, it doesn't leave a row active if no others are hovered over.

    onmouseover=\"this.className='active';\" onmouseout=\"this.className='normal'\"

    How can i only set the rows to normal, when another row is hovered over and set to active? Loop through tr?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skyline View Post
    How can i only set the rows to normal, when another row is hovered over and set to active? Loop through tr?
    That's right. You would get rid of the onmouseout event, and use a loop to remove the class name from all other form rows before adding the active class name.

    You may find it easier to use a function to perform that work, so that you can just call that function instead from the event.
    Last edited by paul_wilkins; Dec 18, 2010 at 17:44.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one way to do it is

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
     
    .normal {
     background-color: green
    }
     
    .active {
     background-color: red
    }
     
    </style>
    <script language="JavaScript" type="text/javascript">
     
    function setDefClass() {
     for(i=0; i < rows.length; i++) {
         //rows[i].setAttribute('class','normal');  this didn't work in IE7
            rows[i].className = 'normal';  
        }
    }
     
    window.onload=function() {
        rows = document.getElementById("myTable").getElementsByTagName("tr");
        //set the default class to these rows
        setDefClass();
        //set the onmouseover event handler
        for(i=0; i < rows.length; i++) {
            rows[i].onmouseover = function () {
                setDefClass();
                this.className = 'active';
            }
        }
        //set the onmouseout event handler
        for(i=0; i < rows.length; i++) {
            rows[i].onmouseout = function () {
             setDefClass();
            }
        }
    }
    </script>
     
    </head>
    <body>
     
    <table id="myTable">
        <tr>
                <td>r1c1</td><td>r1c2</td>
        </tr>
        <tr>
                <td>r2c1</td><td>r2c2</td>
        </tr>
        <tr>
                <td>r3c1</td><td>r3c2</td>
        </tr> 
    </table>
     
    </body>
    </html>
    if you want a row to remain active after you hover off the table, then remove the onmouseout event handler in the js.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •