Results 1 to 7 of 7
  1. #1
    4 Star Lounger
    Join Date
    Jan 2001
    Location
    Altnau, Thurgau, Switzerland
    Posts
    447
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlighting rows in tables with Javascript

    I want to display a table (3 rows, 2 columns) on a HTML page and when the user moves the mouse over a row it changes the background and text colours for the whole row to highlight it.

    At present I can't do that. What I have achieved is to create 3 separate tables (each 1 row, 2 columns) and in Internet Explorer I can change the background colour for the complete row when the mouse goes onto that row.
    However it doesn't change the text colour.
    Worse for Netscape it does nothing at all.

    Does anyone know if what I want to do is possible and if so how.[img]/w3timages/icons/sad.gif[/img]

  2. #2
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Highlighting rows in tables with Javascript

    I haven't tested it, but you should be able to do this with JavaScript. First you should create a function that changes the background color.

    function rowHighlight(rowID,rowColor) {
    document.table.rowID.bgColor=rowColor
    }

    The function would accept two parameters, the table row ID, and the new color. Next you would put the function in the <tr>'s onmouseover property, identifying the row, by ID, and the new color.

    onmouseover="rowHighlight([ID for current row],[the highlight color])

    Last, the onmouseout property of the row should restore the default color.

    onmouseout="rowHighlight([ID for current row],[the default color])

    This should work in both NS 4+ and IE 5+.

  3. #3
    4 Star Lounger
    Join Date
    Jan 2001
    Location
    Altnau, Thurgau, Switzerland
    Posts
    447
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Highlighting rows in tables with Javascript

    Hi artAlexion,

    Thanks for your response however I am still having problems. Please could you look at the following HTML and tell me what I am missing.
    Thanks
    Andy


    <HTML>
    <HEAD>
    <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <TITLE></TITLE>
    <script LANGUAGE="javascript">
    function rowHighlight(rowID,rowColor) {
    document.table.rowID.bgColor=rowColor
    }

    </script>

    </HEAD>
    <BODY>




    <TABLE cellSpacing=1 cellPadding=1 width="75%" border=1>

    <TR ONMOUSEOVER="rowHighlight('0', '#FF0000')" ONMOUSEOUT="rowHighlight('0', '#000000')">
    <TD>hello</TD>
    <TD>world</TD>
    <TD>me</TD></TR>
    <TR ONMOUSEOVER="rowHighlight('1', '#FF0000')" ONMOUSEOUT="rowHighlight('1', '#000000')">
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD></TR>
    <TR ONMOUSEOVER="rowHighlight('2', '#FF0000')" ONMOUSEOUT="rowHighlight('2', '#000000')">
    <TD>


    this</P></TD>
    <TD>and</TD>
    <TD>that</TD></TR></TABLE></P>

    </BODY>
    </HTML>

  4. #4
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Highlighting rows in tables with Javascript

    Like I said, I hadn't tried it. Played with your code. First I corrected a couple of things. Your table and rows had to be given the ID's so that the function could find them.
    <hr>
    <HTML>
    <HEAD>
    <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <TITLE></TITLE>
    <script LANGUAGE="javascript">
    function rowHighlight(rowID,rowColor) {
    document.table1.rowID.bgColor=rowColor
    }

    </script>

    </HEAD>
    <BODY>




    <TABLE ID="table1" cellSpacing=1 cellPadding=1 width="75%" border=1>

    <TR BGCOLOR="#000000" ID="0" ONMOUSEOVER="rowHighlight('0', '#FF0000')" ONMOUSEOUT="rowHighlight('0', '#000000')">
    <TD>hello</TD>
    <TD>world</TD>
    <TD>me</TD></TR>
    <TR ID="1" ONMOUSEOVER="rowHighlight('1', '#FF0000')" ONMOUSEOUT="rowHighlight('1', '#000000')">
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD></TR>
    <TR ID="2" ONMOUSEOVER="rowHighlight('2', '#FF0000')" ONMOUSEOUT="rowHighlight('2', '#000000')">
    <TD>


    this</P></TD>
    <TD>and</TD>
    <TD>that</TD></TR></TABLE></P>

    </BODY>
    </HTML>
    <hr>
    Unfortunately, I could not get it to work with JavaScript anyway. Tables and table rows appear not to be valid JavaScript objects.

    Sorry. As I said, I hadn't tried it.

  5. #5
    4 Star Lounger
    Join Date
    Jan 2001
    Location
    Altnau, Thurgau, Switzerland
    Posts
    447
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Highlighting rows in tables with Javascript

    Thanks anyway.

    It appeared to be the case that the document didn't have a table or a tablerow collection. I hoped someone else knew how to get at them in code. Odd, it seems others such as images, forms etc are part of collections.

  6. #6
    Silver Lounger
    Join Date
    Dec 2000
    Location
    Los Angeles, California, USA
    Posts
    1,734
    Thanks
    0
    Thanked 3 Times in 1 Post

    Re: Highlighting rows in tables with Javascript

    It looks as though both you gentlemen could use some instruction in Javascript. <A target="_blank" HREF=http://javascript.internet.com/>The Javascript Source</A> would be a good place to start.
    <IMG SRC=http://www.wopr.com/w3tuserpics/Eileen_sig.gif>

  7. #7
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Highlighting rows in tables with Javascript

    Thanks for the tip, Eileen. Looks like a great site.

Posting Permissions

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