Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Javascript: onclick changing styles

 
Paul Yule
Ranch Hand
Posts: 229
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64699
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
Paul Yule
Ranch Hand
Posts: 229
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64699
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
*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
    Posts: 229
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 64699
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 64699
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 229
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 229
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 64699
    86
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 15302
    6
    Chrome IntelliJ IDE Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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.
     
    • Post Reply
    • Bookmark Topic Watch Topic
    • New Topic