File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Javascript: onclick changing styles Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Javascript: onclick changing styles" Watch "Javascript: onclick changing styles" New topic
Author

Javascript: onclick changing styles

Paul Yule
Ranch Hand

Joined: May 12, 2008
Posts: 229
Ok, my use case.

I have a table. In my table I have some rows. Rows consist of 4 cells, one of which being a check box. I would like for the checkbox--when clicked--to also call an onCl1ck to create a border around any trs currently clicked. I am only trying to change the BG color atm because if i get that work correctly then changing it to the border should be fairly straight forward. On to the code:



From what i'm able to verify the Javascript seems to working correctly. I have tried to change instead of


to:


with no avail. I feel like I'm doing something dumb that is escaping my vision. Probably to do with CSS or setting the color. Any help is appreciated.
Thanks,

Paul
[ August 25, 2008: Message edited by: Paul Yule ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61606
    
  67

Firstly, I need to point out the inefficiency of your solution. Every time that a checkbox is clicked, you run through the entire table, when all you need to deal with is the current row.

Also, you do not need the "javascript:" pseudo-protocol in front of handlers.

You stated what you wanted to happen, but not what is happening. So I'll assume nothing? Its best to be explicit.

Do your table cells have transparent backgrounds?
[ August 25, 2008: Message edited by: Bear Bibeault ]

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Paul Yule
Ranch Hand

Joined: May 12, 2008
Posts: 229
Originally posted by Bear Bibeault:
Firstly, I need to point out the inefficiency of your solution. Every time that a checkbox is clicked, you run through the entire table, when all you need to deal with is the current row.


yes, however I need information from other rows, so I'm doing this anyway. It's also constrained to a maximum of 10 rows...although this is completely irrelevant to the problem I appreciate your performance concerns.


Also, you do not need the "javascript:" pseudo-protocol in front of handlers.


sure don't...you don't ever need to label anything for it to work *shrug* doesn't affect anything.


You stated what you wanted to happen, but not what is happening. So I'll assume nothing?


Correct, as far as the visibility goes. It does however change the class name in the HTML.


Its best to be explicit.


good point...I might have been able to avoid this post entirely had I.


Do your table cells have transparent backgrounds?


Don't think so, although I haven't got a clue, I can't find it being set explicitly anywhere. Although I do know every other row is a different color atm and it is showing up properly. Doing a onmou5eover="style.background='#f0f0f0'" of a <tr> works just peachy. Dunno if that helps at all diagnosing the problem.
[ August 25, 2008: Message edited by: Paul Yule ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61606
    
  67

*shrug* doesn't affect anything.
I'll disagree on this point. The best way to make your code fragile and confusing is to add unnecessary and superfluous goop.

So you are saying that:
  • Changing the style property of the <tr> gives the cirrect behavior, but
  • Adding the class name to the <tr> does not, and
  • You are certain (how?) that the class name is being correctly added to the <tr>
  • ?
    Paul Yule
    Ranch Hand

    Joined: May 12, 2008
    Posts: 229
    Originally posted by Bear Bibeault:
    I'll disagree on this point. The best way to make your code fragile and confusing is to add unnecessary and superfluous goop.


    Fragile...c'mon, if things didn't work properly what would I do all day? serious though...I doubt putting a label "javascript" would make things more confusing, especially if vb script happened to be inside this mish mosh of code.


    So you are saying that:
    Changing the style property of the <tr> gives the correct behavior


    indeed!

    is the exact in-line code that works for changing the tr color when hovering over it.



    but Adding the class name to the <tr> does not, and You are certain (how?) that the class name is being correctly added to the <tr>


    Upon inspection (via firebug)of the HTML after it's clicked.
    [ August 25, 2008: Message edited by: Paul Yule ]
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61606
        
      67

    It's not a "label", it's a pseudo-protocol. It's non-standard, and not guaranteed to work across browsers or in the future versions of any particular browser. Fragile.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61606
        
      67

    Setting the class of the parent <tr> should work as demonstrated by this test page I whipped up (using jQuery for simplicity):



    All rows with checked checkboxes get the class whatever applied, and all with unchecked checkboxes have it removed. The rows with the class appear with a yellow background.

    So if your HTML and CSS are correct, it should work.

    P.S. Note how butt-simple things like this are done with jQuery (hint, hint).
    Paul Yule
    Ranch Hand

    Joined: May 12, 2008
    Posts: 229
    Originally posted by Bear Bibeault:
    It's not a "label", it's a pseudo-protocol. It's non-standard, and not guaranteed to work across browsers or in the future versions of any particular browser. Fragile.


    You mean it does more than sit infront of function calls? My point was towards it being more confusing having it there... since it doubles as a label. If you read the post I was definitely conceding the point that it's fragile...but I didn't write it.

    I'm hoping to avoid preventing problems, before they're problems, until I'm outta here...I'd end up breaking some scripted URL somewhere. Since there are actually problems that scream attn from the powers that be I'll leave it alone. This .jsp is 6500 lines long...with about 1800 in scriptlet.

    I'll assume there are no more thoughts on my actual problem. In the end my css or tr problem will most likely be an old and janky version of this or that. Or deprecated something or another somewhere.
    [ August 25, 2008: Message edited by: Paul Yule ]
    Paul Yule
    Ranch Hand

    Joined: May 12, 2008
    Posts: 229
    I take it dollar sign shenanigans are short-cuts to the DOM? YUS, one more tool to add to the arsenal... looks good to me, I shall give it a go, thanks!
    [ August 25, 2008: Message edited by: Paul Yule ]
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61606
        
      67

    Originally posted by Paul Yule:
    I take it dollar sign shenanigans are short-cuts to the DOM?
    Partially. The $() function is an alias for the jQuery() function, which has a number of roles.

    It is primarily used to identify DOM elements for manipulation via selectors passed to the function. But it is also used to identify document-ready handlers (a more powerful version of onload handlers), create elements on-the-fly, and as a namespace prefix for utility functions.

    These days, both Eric and I are of the opinion that it's madness to write raw JavaScript when such powerful toolsets are available. Especially once Ajax crawls into the picture. There are many to choose from; jQuery is my favorite for now.
    Gregg Bolinger
    GenRocket Founder
    Ranch Hand

    Joined: Jul 11, 2001
    Posts: 15299
        
        6

    Originally posted by Bear Bibeault:
    These days, both Eric and I are of the opinion that it's madness to write raw JavaScript when such powerful toolsets are available. Especially once Ajax crawls into the picture. There are many to choose from; jQuery is my favorite for now.


    +1000 to this. I'd add more zeros but that might make my point come across as silly.


    GenRocket - Experts at Building Test Data
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: Javascript: onclick changing styles