Need to highlight a table row that contain columns with rows

I have a table with every other row is either white or blue.  The first two columns have a rowspan= 3.  Column 3 has three rows, 4-7 have rowspan=3 and column 8 and 9 have three rows each.  The problem that I'm having is when I move the mouse over columns 1, 2 or 4-7, column 1, 2, row 1 in column 3, row 1 in column 8 and 9, highlight and rows 2 and 3 in column 3, 8 and 9 don't change.

In JavaScript, how can I highlight the rows correctly?  When the mouse moves off the row, the original row color, either white or blue has to be restored.

I am using XSL to build my HTML page.

Thanks.

Each of the rows has this:
<tr id="custtableevenrow" class="custtableevenrow" onmouseover="javascript:HighlightRow(this);" onmouseout="javascript:RemoveHighlightRow(this);" >

or
<tr id="custtableoddrow" class="custtableoddrow" onmouseover="javascript:HighlightRow(this);" onmouseout="javascript:RemoveHighlightRow(this);" >

These functions highlight and remove the highlighted row.

function HighlightRow(src)
{
    src.className = "highlightedrow";

  /*  I don't know how to check for the other rows. */
}

function RemoveHighlightRow(src)
{
      if(src.id == "custtableoddrow")
     {
         src.className = "custtableoddrow";
     }
    else if(src.id == "custtableevenrow")
    {
        src.className = "custtableevenrow";

        /* I don't know how to check for the other rows */
    }
}
halfondjAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
I sounds like you created a mess for yourself by misusing tables for layout.  If this is actually tabular data you are working with it sounds like an overly complex arrangement of elements.  

However it is all speculation and guess work without seeing the page.  The tiny bit of code you posted really doesn't tell me much except you seem to have a tendency to write more code than is necessary.  

If you post a link tto the page or the page code I will have a better chance of understanding what it is you are trying to do.

Cd&
GwynforWebCommented:
this might help

<style>
.redStyle{background-color:'#FF0000';}
.blueStyle{background-color:'#0000FF';}
.hiStyle{background-color:'#AAAAAA';}
</style>

<body>
<table border="1" width="427" height="194">
  <tr class="redStyle" onmouseover="temp=this.className;this.className='hiStyle'" onmouseout="this.className=temp">
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="66">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="48" height="194" rowspan="3">1</td>
    <td width="48" height="194" rowspan="3">1</td>
    <td width="48" height="66">1</td>
    <td width="48" height="66">1</td>
  </tr>
  <tr class="blueStyle" onmouseover="temp=this.className;this.className='hiStyle'" onmouseout="this.className=temp">
    <td width="47" height="66">2</td>
    <td width="48" height="66">2</td>
    <td width="48" height="66">2</td>
  </tr>
  <tr class="blueStyle" onmouseover="temp=this.className;this.className='hiStyle'" onmouseout="this.className=temp">
    <td width="47" height="66">3</td>
    <td width="48" height="66">3</td>
    <td width="48" height="66">3</td>
  </tr>
</table>
</body>

COBOLdinosaurCommented:
Uhm...  66*3 ==== >  194?

Cd&
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

halfondjAuthor Commented:
Thanks for the replies.  I'm VERY new to writing HTML and welcome ALL advice from the experts.

>> I sounds like you created a mess for yourself by misusing tables for layout.  If this is actually tabular data you are working with it sounds like an overly complex arrangement of elements.
It is tabular data.

>> However it is all speculation and guess work without seeing the page.
You speculated corretly :)

 How should I be implementing the code of what I want to do?
COBOLdinosaurCommented:
If you can post a link to the page I can play with the styling, and get a solution.  Second choice is post the page code.  Not as easy to work with; but we needt o see what we are actually up against.

Cd&
GwynforWebCommented:
Is the code I have posted achieving the goal you wish, if not which functionality is wrong?
GwynforWebCommented:
...is the table I have posted the correct form? I am guessing here and I need more detail.
halfondjAuthor Commented:
To GwynforWeb: Thanks for the follow-up.  I just ha a chance to check out your code.  I can't seem to get it working.  I'm still trying.  The table displays, but not the colors.

halfondjAuthor Commented:
Yes the table is in the exact form.  Thanks.
halfondjAuthor Commented:
I got your code working, but it's exactly what wash happening to me before I posted the question.  What I want to do is highlt row 1 and rows 2 and 3 should highlight too.  In addition, rows 2 and 3 should be the same color as 1.  The alternating colors occur when the entire 3 span row changes.
GwynforWebCommented:
I can do anything you want with this but must have a precise defintion of the required functionality. Could you give the required  effects as the mouse mouseovers each row please.
halfondjAuthor Commented:
An entire row consists of rows 1, 2 and 3.  Anytime the user moves the mouse over an entire row, rows 1, 2  and 3 should highlight.  When the user moves the mouse off of the entire row, rows 1, 2, and 3, should restore to their original color.

The original colors for an entire row, alternate between white and blue.  Column 4-7, are not white or blue.  They have differnt colors.

Thanks.
GwynforWebCommented:
I  am sorry but I am still not seeing this. In particular the terms  "An entire row consists of rows 1, 2 and 3" and "moves the mouse over an entire row" do not seem clear to me.
halfondjAuthor Commented:
Col1 spans 3 rows.  When the user moves the mouse over column 1, all three rows across 9 columns need to be highlighted.  If the user moves the mouse on column 2, row 1, all three rows across 9 columns need to be highlighted, if the user moves the mouse on column 2, row 2, all three rows across 9 columns need to be highlighted, etc.

Sorry it's confusing :).
halfondjAuthor Commented:
To COBOLdinosaur: I was going to respond to your posting above.  I really appreciate everyone's time into ansering my questions.

It's not so simple for me to post a link.  The data I have on the page is not public and therefore, I cannot post it.

Is there anyway that you can use GwynforWeb's example code above.  That is how I implemented my table.

THANKS AGAIN!!
COBOLdinosaurCommented:
Then you are going to ned to help her with more detail. We are both trying to understand which cells need to be what color under the various conditions.  You keep talking about rows, but the code the Gwyn gives you implements rows.  It is cells What cells are what color uner each condition.  If you can't post a page with the data then perhaps you can put some dummy data in there that let's us see what you need.

Cd&
GwynforWebCommented:
It looks like the page editor does not want me to help you any more. Best of luck, bye.
halfondjAuthor Commented:
I thought I explained it very well.  The code is exactly what  GwynforWeb posted.  As  GwynforWeb requested, in my previous posting I explained the action of what happens when the user moves the mouse over and out of the row.

halfondjAuthor Commented:
After extensive research, I found what I needed to solve my problem.  All I needed is to put  the <TBody> tag around all the <tr> tags. I'm creating my HTML page using XSL, so I in the code sample below, I inserted the XSL code that alternates entire row colors defined in my css.  Pleae note that had to change GwynforWeb's onmouseover and onmouseout events because I guess in XSL I can't use variables, e.g. temp.  I'm just learning XSL too.

BTW: My application is requiring users to have IE6.

<body>
<table border="1" width="427" height="194">
<tbody>
  <xsl:choose>
  <xsl:when test="(position() - 2) mod 2 = 0">
       <xsl:attribute name="class">custtableevenrow</xsl:attribute>
       </xsl:when>
       <xsl:otherwise>
      <xsl:attribute name="class">custtableoddrow</xsl:attribute>
       </xsl:otherwise>
    </xsl:choose>
    <xsl:attribute name="onmouseover">this.className = "highlightedrow"</xsl:attribute>
    <xsl:attribute name="onmouseout">javascript:RemoveHighlightRow(this);</xsl:attribute>  <tr>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="66">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="48" height="194" rowspan="3">1</td>
    <td width="48" height="194" rowspan="3">1</td>
    <td width="48" height="66">1</td>
    <td width="48" height="66">1</td>
  </tr>
  <tr>
    <td width="47" height="66">2</td>
    <td width="48" height="66">2</td>
    <td width="48" height="66">2</td>
  </tr>
  <tr>
    <td width="47" height="66">3</td>
    <td width="48" height="66">3</td>
    <td width="48" height="66">3</td>
  </tr>
</tbody>
</table>
</body>
halfondjAuthor Commented:
Oops, the code I just provided isn't exactly right.  Because I'm using XSL, let me correct it:

<html>
<body>
<table border="1" width="100%" summary="Customer information data">
    <xsl:apply-templates select="masterclient/customer">
           <xsl:sort select="account_number" order="ascending" data-type="number"/>
    </xsl:apply-templates>
</table>
</body>
</html>

<xsl:template match="customer">
<tbody>
  <xsl:choose>
  <xsl:when test="(position() - 2) mod 2 = 0">
       <xsl:attribute name="class">custtableevenrow</xsl:attribute>
       </xsl:when>
       <xsl:otherwise>
     <xsl:attribute name="class">custtableoddrow</xsl:attribute>
       </xsl:otherwise>
    </xsl:choose>
    <xsl:attribute name="onmouseover">this.className = "highlightedrow"</xsl:attribute>
    <xsl:attribute name="onmouseout">javascript:RemoveHighlightRow(this);</xsl:attribute>  <tr>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="66">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="47" height="194" rowspan="3">1</td>
    <td width="48" height="194" rowspan="3">1</td>
    <td width="48" height="194" rowspan="3">1</td>
    <td width="48" height="66">1</td>
    <td width="48" height="66">1</td>
  </tr>
  <tr>
    <td width="47" height="66">2</td>
    <td width="48" height="66">2</td>
    <td width="48" height="66">2</td>
  </tr>
  <tr>
    <td width="47" height="66">3</td>
    <td width="48" height="66">3</td>
    <td width="48" height="66">3</td>
  </tr>
</tbody>
</xsl:template>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
Posting the original XSL this morning probably would have gotten it solved by noon.

Cd&
 

halfondjAuthor Commented:
Thanks for your help anyway.
halfondjAuthor Commented:
Yes it does.  Thanks.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.