Changing CSS style in use for <TD> using Javascript - How?

Discussion in 'HTML' started by Dave Smithz, Feb 24, 2006.

  1. Dave Smithz

    Dave Smithz Guest

    Hi there,

    I want to change the CSS style sheet applied to a table cell when the mouse
    moves over it. But I am not sure how to do it.

    I have written a function like this:

    function highlight_cell (obj) {
    obj.styleSheet="navHighlightCell";
    };

    Which has associated style sheet like this:

    ..navHighlightCell {
    background-color: #FFFFFF;
    }

    But it does not work. I know I can just use the following code in the
    function
    obj.style.backgroundColor='#FFFFFF';
    I have got this to work, but I do not want to hard code colours or anything
    like that. I want to keep them in stylesheets.

    Obviously the solution should be one that is cross browser compatible.

    Can anyone help?

    Kind regards

    Dave
     
    Dave Smithz, Feb 24, 2006
    #1
    1. Advertising

  2. Dave Smithz

    BootNic Guest

    > "Dave Smithz" <> wrote:
    > news:NRCLf.53819$....
    >
    > Hi there,
    >
    > I want to change the CSS style sheet applied to a table cell when
    > the mouse moves over it. But I am not sure how to do it.
    >

    [snip]
    >
    > But it does not work. I know I can just use the following code in
    > the function
    > obj.style.backgroundColor='#FFFFFF';
    > I have got this to work, but I do not want to hard code colours or
    > anything like that. I want to keep them in stylesheets.
    >
    > Obviously the solution should be one that is cross browser
    > compatible.
    >
    > Can anyone help?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function hbob(){
    var v=document.getElementById('bob').getElementsByTagName('tbody')[0].getElementsByTagName('td');
    var x,i,j;
    for (i=0, j=v.length; i<j; i++) {
    x=v;
    x.onmouseover=function(){this.className='highlight';};
    x.onmouseout=function(){this.className='';};
    }
    }
    if(document.getElementById &&
    document.getElementsByTagName &&
    (window.attachEvent || window.addEventListener))
    {
    frank=(window.attachEvent)?window.attachEvent('onload', hbob):
    window.addEventListener("load", hbob, false);
    }
    </script>
    <style type="text/css">
    #bob{
    margin: auto;
    }
    #bob tbody td{
    background-color: #7FFFD4;
    color: #A9A9A9;
    }
    #bob tbody td.highlight{
    background-color: #FFFFE0;
    color: #FF0000;
    }
    </style>
    <title></title>
    <meta http-equiv="content-type" content=
    "text/html; charset=windows-1252">
    </head>
    <body>
    <table id="bob" summary="" border="1">
    <thead>
    <tr><td colspan="2">My Table Head</td></tr>
    </thead>
    <tfoot><tr><td colspan="2">My Table Foot</td></tr></tfoot>
    <tbody>
    <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
    <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
    <tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
    <tr><td>Row 4 Cell 1</td><td>Row 4 Cell 2</td></tr>
    <tr><td>Row 5 Cell 1</td><td>Row 5 Cell 2</td></tr>
    </tbody>
    </table>
    </body>
    </html>

    --
    BootNic Friday, February 24, 2006 9:24 AM

    All things come to him who waits - provided he knows what he is
    waiting for.
    *Woodrow T. Wilson*
     
    BootNic, Feb 24, 2006
    #2
    1. Advertising

  3. Dave Smithz

    Toby Inkster Guest

    Dave Smithz wrote:

    > function highlight_cell (obj) {
    > obj.styleSheet="navHighlightCell";
    > };


    obj.styleSheet doesn't do what you think it does.

    You probably want obj.className.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Feb 24, 2006
    #3
  4. Dave Smithz

    Guest

    Dave Smithz wrote:
    > I want to change the CSS style sheet applied to a table cell when the mouse
    > moves over it. But I am not sure how to do it.


    This is some code that should work for changing the background color of
    a cell when hovering over it:

    <head>
    <script type="text/javascript">
    function hl(source){
    if (source.className == 'style-1') {
    source.className = 'style-2';
    } else if (source.className == 'style-2') {
    source.className = 'style-1';
    }
    }
    </script>
    <style>
    .style-1 {
    background-color:white;
    }
    .style-2 {
    background-color:blue;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td onMouseOver="hl(this);" onMouseOut="hl(this);">This is the cell
    that will change color</td>
    </tr>
    </table>
    </body>

    Chris S.
    Implied By Design LLC.
    http://www.impliedbydesign.com
    Free Web Design Tools
    http://www.impliedbydesign.com/free-software-scripts.html
     
    , Feb 24, 2006
    #4
  5. Dave Smithz

    dorayme Guest

    In article <5n.co.uk>,
    Toby Inkster <> wrote:

    You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
    are there any particular advantages to you or others?

    (There is a particular but minor disadvantage using
    MT-NewsWatcher to read such, there being no prefs to hold the
    text at a size the user finds comfortable. Quite minor as one can
    easily decode as Western ISO or ASCII on a post by post basis
    from a context menu and it then follows my font prefs. I was
    wondering because very few NG articles are so formatted?)

    --
    dorayme
     
    dorayme, Feb 25, 2006
    #5
  6. "dorayme" <> skrev i meddelandet
    news:...
    > In article <5n.co.uk>,
    > Toby Inkster <> wrote:
    >
    > You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
    > are there any particular advantages to you or others?


    By using UTF-8 I can display
    both the characters used by
    Westeuropeans languages and the ones used by other languages such as
    Chinese and Russian (it uses cyrillic)
    My signature often displays such characters.
    (the signature below shows only Chinese and Italian)

    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/it/traduzioni.php
    今天二零零六年二月二å五日
    星期六
     
    Luigi Donatello Asero, Feb 25, 2006
    #6
  7. In article
    <>,
    dorayme <> wrote:

    > You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
    > are there any particular advantages to you or others?
    >
    > (There is a particular but minor disadvantage using
    > MT-NewsWatcher to read such, there being no prefs to hold the
    > text at a size the user finds comfortable. Quite minor as one can
    > easily decode as Western ISO or ASCII on a post by post basis
    > from a context menu and it then follows my font prefs. I was
    > wondering because very few NG articles are so formatted?)


    You hit my only gripe with MT-NW. I absolutely hate what you just
    described. Command-r shows them properly with <greater than> signs for
    the original poster which is confusing. Command-y doesn't necessarily
    close the window without something you must respond to if MT-NW thinks
    you messed with the original message. And Command-r is a hack that is
    not meant to solve the situation. You're supposed to reply with
    Command-r. Some of the more interesting people I read use UTF-8.
    This is a most annoying disadvantage of an otherwise fine reader on
    MacOS.

    leo

    --
    <http://web0.greatbasin.net/~leo/>
     
    Leonard Blaisdell, Feb 25, 2006
    #7
  8. Dave Smithz

    Toby Inkster Guest

    dorayme wrote:

    > You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
    > are there any particular advantages to you or others?


    None in particular. I can change it on a post-by-post basis (like this
    one), but I think UTF-8 is a pretty good character set to default to, as
    it contains the entire Unicode repetoire.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Feb 25, 2006
    #8
  9. Dave Smithz

    dorayme Guest

    In article <heQLf.46113$>,
    "Luigi Donatello Asero" <> wrote:

    > "dorayme" <> skrev i meddelandet
    > news:...
    > > In article <5n.co.uk>,
    > > Toby Inkster <> wrote:
    > >
    > > You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
    > > are there any particular advantages to you or others?

    >
    > By using UTF-8 I can display
    > both the characters used by
    > Westeuropeans languages and the ones used by other languages such as
    > Chinese and Russian (it uses cyrillic)
    > My signature often displays such characters.
    > (the signature below shows only Chinese and Italian)


    Yes, thank you Luigi... (it was parochial of me, I tend not to
    look at these displays in NG articles...)

    --
    dorayme
     
    dorayme, Feb 25, 2006
    #9
  10. Dave Smithz

    dorayme Guest

    In article
    <-sjc.supernews.net>,
    Leonard Blaisdell <> wrote:

    > Some of the more interesting people I read use UTF-8.
    > This is a most annoying disadvantage of an otherwise fine reader on
    > MacOS.


    I understand that this will not easily be fixed unless the author
    of MT gets funded to develop it further...

    --
    dorayme
     
    dorayme, Feb 25, 2006
    #10
    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. Hardeep Rakhra
    Replies:
    8
    Views:
    664
    Hardeep Rakhra
    Jan 15, 2004
  2. Aaron Beall
    Replies:
    2
    Views:
    1,915
    Aaron Beall
    Sep 14, 2007
  3. Ken Varn
    Replies:
    0
    Views:
    538
    Ken Varn
    Apr 26, 2004
  4. Replies:
    8
    Views:
    197
    Randy Webb
    May 24, 2005
  5. Nik Coughlin
    Replies:
    2
    Views:
    199
    Nik Coughlin
    Jan 23, 2008
Loading...

Share This Page