#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Posts
    103
    Rep Power
    16

    mouseover a table rows


    Hello everybody,
    I'm new to javascript and i'm trying to create a selectable row from a table..
    objective.. when a mouse moves over a row it should highlight the entire row not just a cell. it should be selectable meaning if a user clicks anywhere in the row it should move to the next page... i was able to make the row highlight or change color but what i did seem to affect other tables in my script as well.. the following code is what i have...
    I like to apply the above description to the "middle table" only and leaving the top and the bottom table untouched..

    [code]
    --------------------------------------------------------------------------------
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    tr {position: relative; border: 0px salmon solid;}
    .class1 A:link {background: gray: color: black; text-decoration: none}
    .class1 A:visited {color: black; text-decoration: none}
    .class1 A:active {text-decoration: none}
    .class1 A:hover {text-decoration: none; color: none;}

    </style>
    <script type="text/javascript" language="javascript">
    var tds = document.getElementsByTagName('tr');
    onload = function()
    { var c, i =0;
    while (c = tds.item(i++))
    { c.onmouseover = function() {this.style.background='yellow';}
    c.onmouseout = function() {this.style.background='transparent';}
    }
    }

    </script>
    </head>
    <body bgcolor= "#3399CC">
    <table align= "center" border="0">
    <tr>
    <td height="34"><b>table 1 </b></td>
    <td height="34">choice 2 </td>
    <td height="34">choice 3 </td>
    <td height="34">choice 4 </td>
    </tr>
    <tr>
    <td height="34">Choice 2</td>
    <td height="34">choice 2 </td>
    <td height="34">choice 3 </td>
    <td height="34">choice 4</td>
    </tr>
    <tr>
    <td >Choice 2 </td>
    <td height="34">choice 2 </td>
    <td height="34">choice 3 </td>
    <td height="34">choice 4 </td>
    </tr>
    </table>
    <div >

    <table align= "center" border="0">
    <tr>
    <td height="34"><span class="class1"> <a href="clientdetail.php"><b>middle table 2 </b></a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 2 </a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 3 </a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 4 </a></span></td>
    </tr>
    <tr>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 2 </a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 2 </a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 3 </a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 4 </a></span></td>
    </tr>
    <tr>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 2 </a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 2 </a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 3 </a></span></td>
    <td height="34"><span class="class1"> <a href="clientdetail.php">middle table 4 </a></span></td>
    </tr>
    </table>

    <table align= "center" border="0">
    <tr>
    <td height="34"><b>table 3 </b></td>
    <td height="34">choice 2 </td>
    <td height="34">choice 3 </td>
    <td height="34">choice 4 </td>
    </tr>
    <tr>
    <td height="34">Choice 2</td>
    <td height="34">choice 2 </td>
    <td height="34">choice 3 </td>
    <td height="34">choice 4</td>
    </tr>
    <tr>
    <td height="34">Choice 2 </td>
    <td height="34">choice 2 </td>
    <td height="34">choice 3 </td>
    <td height="34">choice 4 </td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    -------------------------------------------------------------
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    16
    Give the middle <tr>s a class name:

    <table align= "center" border="0">
    <tr class="link">
    ......
    .......
    <tr class="link">
    <td height="34"><span class="class1.....

    And:

    var trs = document.getElementsByTagName('tr');
    onload = function() {
    var row, i = 0;
    while (row = trs.item(i++)) if (row.className == 'link') {
    row.onmouseover = function() {this.style.background='yellow';}
    row.onmouseout = function() {this.style.background='transparent';}
    }
    }
  4. #3
  5. I am still learning
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Kuala Lumpur, Malaysia
    Posts
    249
    Rep Power
    16
    alternate to mrrichardfeder's method:

    give <tr> an id.

    then:

    PHP Code:
    <tr id="some_id" onMouseOver="high('some_id')" onMouseOut="low('some_id')">
    <
    td>..</td>
    <
    td>..</td>
    </
    tr
    lastly, in between your <head></head> tag:

    PHP Code:
    <script>
    function 
    high(trindex){
    document.getElementById(trindex).style.backgroundColor '#ffff99';
    }

    function 
    low(trindex){
    document.getElementById(trindex).style.backgroundColor 'lightyellow';
    }
    </script> 
    I have yet to find the right way to do it.

    www.genedavinci.com
  6. #4
  7. I am still learning
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Kuala Lumpur, Malaysia
    Posts
    249
    Rep Power
    16
    overally, i think my way and mrrichardfeder's way both serve the same purpose. however, i think his way is much better than mine. he uses lesser code and it's more elegant

    cheers.
    I have yet to find the right way to do it.

    www.genedavinci.com

IMN logo majestic logo threadwatch logo seochat tools logo