"Live" style switching in HTML/JS

[aranaxon]

Hi, I was looking to verify that the logic for a script i'm about to write is correct and would likely work before I embark on writing it.

I have a table with many cells, whose styles i'd like to change, depending on a menu clicked (to help with visualization). So for example, if the enduser clicks "Style1" on the side, all the related cells to style1 are bolded or flagged or something like that, so on for style 2, 3, 4 etc. IDEALLY, the style should be togglable... but that i'll work out later.

What i'm thinking will work right now is a JS Script in the header, something along the lines of:

setstyletoggler('style1', 'altstyle1', 'variablename1')

and then with onclick link the script to the style-selecting menu.

so onclick of Style1 button, altstyle1 is adopted into 'variablename1'

in the table cells, I would do something like

(td style='variablename1') for all cells related to style 1



Does this logic make sense? upon clicking the menu, will all table cells with style 'variablename1' change styles?

 

[aranaxon]

bump, help is greatly appreciated!

 

[DaveSimmons]

You can assign IDs to elements like < div > and them find them in js by ID

var elt = document.getElementById( 'mydiv001' ) ;

google on this function for code samples

 

[aranaxon]

Is there something wrong with the existing logic that I'm using?

 

[DaveSimmons]

I don't think a browser will refresh a page for an indirect change like yours instead of the direct change that I described, but I could easily be wrong (99% of my work is C++, 1% is HTML).

What I suggested does work for div and span so you don't need to update individual table cells or paragraphs.

 

[aranaxon]

I'll look into it; my concern is I'm learning it all from scratch and just using wordpad to write it (I'm working in an engineering dpt, w/ no real software-people here) so new things take a while for me to get my head around.

edit: as a note I was planning on using classes, so that all related table cells would be changed on the fly

 

[statik213]

I'm not exactly sure what you mean, do you want to highlight individual table cells by clicking on them or change the entire page's style sheet?
See here:
http://www.alistapart.com/articles/bodyswitchers/
and here:
http://www.alistapart.com/articles/zebratables/

 

[statik213]

and this:
http://www.alistapart.com/articles/tableruler/

 

[aranaxon]

The concept is very similar to bodyswitchers, but rather than applying a global style sheet, I want to change the style applied to a specific cells with a table - for example, i might want to change the style on cells A, D, and F so that its a bright neon pink, using the style class "superpink", which is applied when I click somewhere ELSE (an activating trigger), ostensibly "click here to activate superpink on cells A, D and F"

thanks again

 

[BoberFett]

So don't use a single stylesheet. Have a main stylesheet, then other secondary style sheets that apply just to the portion of the page you want to change. Then switch out that secondary style sheet as needed.