Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts

    Table cell rollover

    I am not really a javascript programer. My years of Java and PHP have given me programming experiance, but it seems JS is just to different.

    What I am trying to do is rollover one/any of the cells in a given row, and have that, and all other cells in the row change class.
    (Not bgcolor, as this changes via PHP)

    I can use PHP to insert a count into the id of each cell, so you have something like...
    Code:
    <tr><td id='row1col1'>Stuff</td><td id='row1col2'>Stuff</td><td id='row1col3'>Stuff</td></tr>
    //Rollover anything in  row: 1, and all cells in row: 1 change class
    <tr><td id='row2col1'>Stuff</td><td id='row2col2'>Stuff</td><td id='row2col3'>Stuff</td></tr>
    <tr><td id='row3col1'>Stuff</td><td id='row3col2'>Stuff</td><td id='row3col3'>Stuff</td></tr>
    If anyone can help, please do. Thank you alot.
    If I'm postin here, I NEED YOUR HELP!!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    here is one way
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    .red {
    background-color:#FF0000;
    }
    </style>
    <script type="text/javascript"><!--
    function changeclass(whatid1,whatid2,whatid3,whatclass){
    document.getElementById(''+whatid1+'').className=''+whatclass+'';
    document.getElementById(''+whatid2+'').className=''+whatclass+'';
    document.getElementById(''+whatid3+'').className=''+whatclass+'';
    }
    //-->
    </script>
    </head>
    
    <body>
    <table>
    <tr><td id='row1col1' onmouseover="changeclass(this.id,'row1col2','row1col3','red')" onmouseout="changeclass(this.id,'row1col2','row1col3','')">Stuff</td>
    <td id='row1col2' onmouseover="changeclass(this.id,'row1col1','row1col3','red')" onmouseout="changeclass(this.id,'row1col1','row1col3','')">Stuff</td>
    <td id='row1col3' onmouseover="changeclass(this.id,'row1col1','row1col2','red')" onmouseout="changeclass(this.id,'row1col1','row1col2','')">Stuff</td></tr>
    //Rollover anything in  row: 1, and all cells in row: 1 change class
    <tr><td id='row2col1'>Stuff</td><td id='row2col2'>Stuff</td><td id='row2col3'>Stuff</td></tr>
    <tr><td id='row3col1'>Stuff</td><td id='row3col2'>Stuff</td><td id='row3col3'>Stuff</td></tr>
    </table>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do the table cells need to be styled individually? If not, do the whole row with
    Code:
    <tr class='normalclass' onmouseover="this.className='hoverclass' " onmouseout="this.className='normalclass' ">
    If only special cells are allowed to trigger rollover of the row, try
    Code:
    function rolloverRow(target, newclass){
      var tds=target.parentNode.getElementsByTagName('td');
      var i=tds.length;
      while(i--)
        tds[i].className=newclass;
      }
    
    <td  class='normalclass' onmouseover="rolloverRow(this,'hoverclass')" onmouseout="rolloverRow(this,'normalclass')">


  •  

    Posting Permissions

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