Highlighting Rows

Discussion in 'Javascript' started by vunet.us@gmail.com, Jul 16, 2007.

  1. Guest

    To highlight the table's row with onmouseover/onmouseout events I use
    2 functions which switch rows' class names. How can I highlight the
    same rows, if every cell of the row contains various class names?

    If cell has a CSS class name with some BG color, row's BG color is no
    longer visible. I tried a function to loop through every cell of the
    row and remove className onmouseover and apply back onmouseout. But
    that generates error that className property is not found, even though
    it is there. There are a lot of problems like that when I googled for
    "error getting className property".

    Is anyone aware of this situation and what to do? How to highlight row
    with cells having different class names?
    Thanks
     
    , Jul 16, 2007
    #1
    1. Advertising

  2. David Mark Guest

    On Jul 16, 2:43 pm, wrote:
    > To highlight the table's row with onmouseover/onmouseout events I use
    > 2 functions which switch rows' class names. How can I highlight the
    > same rows, if every cell of the row contains various class names?
    >
    > If cell has a CSS class name with some BG color, row's BG color is no
    > longer visible. I tried a function to loop through every cell of the
    > row and remove className onmouseover and apply back onmouseout. But
    > that generates error that className property is not found, even though
    > it is there. There are a lot of problems like that when I googled for
    > "error getting className property".


    Can't help you there as you didn't post any code. But, if all of your
    cell's have different colors, then perhaps you shouldn't obscure this
    distinction in your rollover effect.
     
    David Mark, Jul 16, 2007
    #2
    1. Advertising

  3. Blue Streak Guest

    On Jul 16, 2:43 pm, wrote:
    > To highlight the table's row with onmouseover/onmouseout events I use
    > 2 functions which switch rows' class names. How can I highlight the
    > same rows, if every cell of the row contains various class names?
    >
    > If cell has a CSS class name with some BG color, row's BG color is no
    > longer visible. I tried a function to loop through every cell of the
    > row and remove className onmouseover and apply back onmouseout. But
    > that generates error that className property is not found, even though
    > it is there. There are a lot of problems like that when I googled for
    > "error getting className property".
    >
    > Is anyone aware of this situation and what to do? How to highlight row
    > with cells having different class names?
    > Thanks


    Not sure how you have your code setup but you can try this:

    function highlightTableRow(tblTemp)
    {//highlight table rows
    var tr = tblTemp.getElementsByTagName('tr');
    for(var j = 0; j < tr.length; j++)
    {//only rows in <TBODY> tags
    if(tr[j].parentNode.nodeName == 'TBODY')
    {
    tr[j].onmouseover = function()
    {
    this.style.background = '#9cf';
    return false;
    }

    tr[j].onmouseout = function()
    {
    this.style.background = '';
    return false;
    }
    }
    }
    }

    <table id="tblMyTable">
    ....
    <tbody>
    ...//these rows get highlighted with mouseover event
    </tbody>
    </table>

    <script language="javascript">
    highlightTableRow(tblMyTable)
    </script>
     
    Blue Streak, Jul 16, 2007
    #3
  4. Guest

    On Jul 16, 3:20 pm, David Mark <> wrote:
    > On Jul 16, 2:43 pm, wrote:
    >
    > > To highlight the table's row with onmouseover/onmouseout events I use
    > > 2 functions which switch rows' class names. How can I highlight the
    > > same rows, if every cell of the row contains various class names?

    >
    > > If cell has a CSS class name with some BG color, row's BG color is no
    > > longer visible. I tried a function to loop through every cell of the
    > > row and remove className onmouseover and apply back onmouseout. But
    > > that generates error that className property is not found, even though
    > > it is there. There are a lot of problems like that when I googled for
    > > "error getting className property".

    >
    > Can't help you there as you didn't post any code. But, if all of your
    > cell's have different colors, then perhaps you shouldn't obscure this
    > distinction in your rollover effect.


    copy-paste code demonstrates the problem: only last row is
    highllighted...

    <html><head>
    <title>Simple example</title>
    <style type="text/css">
    ..blue{background-color:lightblue;}
    ..red{background-color:eek:range;}
    ..yellow{background-color:lightyellow;}
    ..tableRowOver{background-color:gold;}
    ..tableRrow{}
    </style>
    <script language="JavaScript">
    function start(){
    var d = document.getElementById("myDiv");
    d.innerHTML = "<table width='100%'><tr onmouseover='hilite(this)' "+
    "onmouseout='lolite(this)'><td class='blue'>blue</td>"+
    "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
    "<tr onmouseover='hilite(this)' onmouseout='lolite(this)'>"+
    "<td class='blue'>blue</td>"+
    "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
    "<tr onmouseover='hilite(this)'onmouseout='lolite(this)'><td
    class='blue'>blue</td>"+
    "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
    "<tr onmouseover='hilite(this)'onmouseout='lolite(this)'><td>empty</
    td>"+
    "<td>empty</td><td>empty</td></tr></table>";
    }
    function hilite(row){row.className = 'tableRowOver';}
    function lolite(row){row.className = 'tableRow';}
    </script>
    </head>
    <body ONLOAD="start()">
    <div id='myDiv'></div>
    </body>
    </html>
     
    , Jul 16, 2007
    #4
  5. David Mark Guest

    On Jul 16, 5:13 pm, wrote:
    > On Jul 16, 3:20 pm, David Mark <> wrote:
    >
    >
    >
    >
    >
    > > On Jul 16, 2:43 pm, wrote:

    >
    > > > To highlight the table's row with onmouseover/onmouseout events I use
    > > > 2 functions which switch rows' class names. How can I highlight the
    > > > same rows, if every cell of the row contains various class names?

    >
    > > > If cell has a CSS class name with some BG color, row's BG color is no
    > > > longer visible. I tried a function to loop through every cell of the
    > > > row and remove className onmouseover and apply back onmouseout. But
    > > > that generates error that className property is not found, even though
    > > > it is there. There are a lot of problems like that when I googled for
    > > > "error getting className property".

    >
    > > Can't help you there as you didn't post any code. But, if all of your
    > > cell's have different colors, then perhaps you shouldn't obscure this
    > > distinction in your rollover effect.

    >
    > copy-paste code demonstrates the problem: only last row is
    > highllighted...
    >
    > <html><head>
    > <title>Simple example</title>
    > <style type="text/css">
    > .blue{background-color:lightblue;}
    > .red{background-color:eek:range;}
    > .yellow{background-color:lightyellow;}
    > .tableRowOver{background-color:gold;}
    > .tableRrow{}
    > </style>
    > <script language="JavaScript">
    > function start(){
    > var d = document.getElementById("myDiv");
    > d.innerHTML = "<table width='100%'><tr onmouseover='hilite(this)' "+
    > "onmouseout='lolite(this)'><td class='blue'>blue</td>"+
    > "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
    > "<tr onmouseover='hilite(this)' onmouseout='lolite(this)'>"+
    > "<td class='blue'>blue</td>"+
    > "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
    > "<tr onmouseover='hilite(this)'onmouseout='lolite(this)'><td
    > class='blue'>blue</td>"+
    > "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
    > "<tr onmouseover='hilite(this)'onmouseout='lolite(this)'><td>empty</
    > td>"+
    > "<td>empty</td><td>empty</td></tr></table>";}
    >
    > function hilite(row){row.className = 'tableRowOver';}
    > function lolite(row){row.className = 'tableRow';}
    > </script>
    > </head>
    > <body ONLOAD="start()">
    > <div id='myDiv'></div>
    > </body>
    > </html>- Hide quoted text -
    >
    > - Show quoted text -


    You could change your style block to:

    ..blue{background-color:lightblue;}
    ..red{background-color:eek:range;}
    ..yellow{background-color:lightyellow;}
    ..tableRowOver td {background-color:gold !important}
     
    David Mark, Jul 16, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?V2ViTWF0cml4?=

    Highlighting DataGrid Rows on mouseOver

    =?Utf-8?B?V2ViTWF0cml4?=, Dec 1, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    2,975
    Eliyahu Goldin
    Dec 1, 2004
  2. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,281
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  3. Bob Loveshade
    Replies:
    1
    Views:
    7,695
    Venkat_KL
    Nov 19, 2005
  4. .NETn00b
    Replies:
    0
    Views:
    511
    .NETn00b
    Nov 19, 2005
  5. .NETn00b

    Selecting and Highlighting Multiple Rows in a DataGrid

    .NETn00b, Nov 19, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    134
    .NETn00b
    Nov 19, 2005
Loading...

Share This Page