asked on

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 */
}
}

COBOLdinosaur

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&

GwynforWeb

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>

COBOLdinosaur

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

Cd&

halfondj

ASKER

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?

COBOLdinosaur

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&

GwynforWeb

Is the code I have posted achieving the goal you wish, if not which functionality is wrong?

GwynforWeb

...is the table I have posted the correct form? I am guessing here and I need more detail.

halfondj

ASKER

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.

halfondj

ASKER

Yes the table is in the exact form. Thanks.

halfondj

ASKER

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.

GwynforWeb

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.

halfondj

ASKER

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.

GwynforWeb

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.

halfondj

ASKER

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 :).

halfondj

ASKER

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!!

COBOLdinosaur

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&

GwynforWeb

It looks like the page editor does not want me to help you any more. Best of luck, bye.

halfondj

ASKER

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.

halfondj

ASKER

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>

ASKER CERTIFIED SOLUTION

halfondj

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

Posting the original XSL this morning probably would have gotten it solved by noon.

Cd&

halfondj

ASKER

Thanks for your help anyway.

halfondj

ASKER

Yes it does. Thanks.