By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,711 Members | 2,158 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,711 IT Pros & Developers. It's quick & easy.

javascript stylesheets

P: n/a
I have a large table in html created dynamically. This table can grow
to several hundred rows or more. I have the ability to hide or display
individual rows (using row.style.display = "none") and this works well
in both IE and Firefox.

I would also like to do the same with columns as well. I did some
research and col and colgroup nodes are not supported fully in both
browsers. Also, doing "visibility: hidden" and sometimes "display:
none" don't work correctly. The only solution I know to work would be
to go through each row and set the particular cells in the column using
'td.style.display = "none"'. With that many rows, this is not
efficient.

I do have each cell in the column set up with classes. Its easy in
Javascript to set the style of each cell in the DOM. However, I was
wondering if there is a way to set the style of the class itself? For
example, I have the following class defined in CSS:
.columna { display: none; }
Using Javascript, is there a way to change the value of the style of
the class without having to iterate through each row and cell?
Unfortunately I need to support both IE and Firefox, and for
supportability, I would prefer one solution that works on both OS's (I
already have tons of browser dependant code as it is).

Is it possible?
Thanks,
Scott

Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
go**********@scottsavarese.com wrote:
[...]
I do have each cell in the column set up with classes. Its easy in
Javascript to set the style of each cell in the DOM. However, I was
wondering if there is a way to set the style of the class itself? For
example, I have the following class defined in CSS:
.columna { display: none; }

Yes, you can modify the style rule's text. Not pretty, but vastly
quicker than looping through a few hundred rows.

Using Javascript, is there a way to change the value of the style of
the class without having to iterate through each row and cell?
Yes.
Unfortunately I need to support both IE and Firefox, and for
supportability, I would prefer one solution that works on both OS's (I
already have tons of browser dependant code as it is).
Not 'unfortunate' really. It's a PITA anyway, adding support for DOM
and IE is just one more hassle.
Is it possible?


Yes, see below. This script was modified from one originally posted by
RobB:

<URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/41fc5fcdf69a934/eeb33edb6af79855?q=document.styleSheets&rnum=13&hl =en#eeb33edb6af79855>

There may be a better way to modify the actual rule, I've just used
string concatenation/replacement. You may be able to load all the
properties into an array and then write them back out again, that would
likely be more robust (note that IE uses uppercase and Mozilla lower
case, they also report colours differently, etc.).

This will probably not work in IE 5, from memory it prefixes rule
selectors (class names, etc.) with '*'.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

<style type="text/css">
..col0 { background-color: #FFFF99; color: black; }
..col1 { background-color: #CED1FD; color: black; }
</style>
</head>
<body>

<textarea id="msg" rows="5" cols="80"></textarea><br>

<input type="button" value="Hide/show column 0 by looping" onclick="
hsCol( 'tableX', 0 );
">
<input type="button" value="Hide/show column 1 by looping" onclick="
hsCol( 'tableX', 1 );
"><br>
<input type="button" value="Hide/show class col0 by rule" onclick="
hsRule( 'tableX', 'col0' );
">
<input type="button" value="Hide/show class col1 by rule" onclick="
hsRule( 'tableX', 'col1' );
">

<script type="text/javascript">

function hsRule( t, cName ) {

/* Debug */
var msg = document.getElementById('msg')

t = document.getElementById( t );

if ( 'undefined' != typeof document.styleSheets ) {
var sheet = document.styleSheets;
var j, i = sheet.length,
s, rtype, rs, r, str;

while ( i-- ) {
s = sheet[i];

// Determine rule type - IE rules, Moz cssRules
rtype = ( typeof s.rules != 'undefined' ) ? 'rules' : 'cssRules';
if (typeof s[rtype] != 'undefined') {
rs = s[rtype];
j = rs.length;
while ( j-- ) {
r = rs[j];
if ( '.'+cName == r.selectorText ) {
/* debug */
msg.value = 'Before\n'+r.selectorText + ' : ' + r.style.cssText ;
str = /display: none;/i;
if ( r.style.cssText.match( str ) ) {
r.style.cssText = r.style.cssText.replace( str, ';');
} else {
r.style.cssText += '; display: none;';
}
/* debug */
msg.value += '\nAfter\n'+r.selectorText + ' : ' + r.style.cssText ;
return;
}
}
}
}
}
}

function hsCol( t, idx ){
t = document.getElementById( t );
var c;
var r = t.rows;
var i = t.rows.length;
if ( r[0].cells[idx] && document.body.style ) {
while ( i-- ) {
c = r[i].cells[idx];
c.style.display = ( 'none' == c.style.display )? '' : 'none';
}
}
}

// Generate a big table...
var rs = '<tr><td class="col0">row ';
var rm = ' cell 0</td><td class="col1">row ';
var re = ' cell 1</td></tr>';

document.write('<table id="tableX">');
for (var i=0; i<500; i++ ){
document.write( rs + i + rm + i + re );
}
document.write('</table>');

</script>

</body></html>
--
Rob
Jul 23 '05 #2

P: n/a
RobG wrote:
go**********@scottsavarese.com wrote:
[...]
I do have each cell in the column set up with classes. Its easy in
Javascript to set the style of each cell in the DOM. However, I was
wondering if there is a way to set the style of the class itself? For
example, I have the following class defined in CSS:
.columna { display: none; }
Yes, you can modify the style rule's text. Not pretty, but vastly
quicker than looping through a few hundred rows.


But older platforms have patchy support for changing css rules on the fly.
Using Javascript, is there a way to change the value of the style of
the class without having to iterate through each row and cell?

Yes.
Unfortunately I need to support both IE and Firefox, and for
supportability, I would prefer one solution that works on both OS's (I
already have tons of browser dependant code as it is).

Not 'unfortunate' really. It's a PITA anyway, adding support for DOM
and IE is just one more hassle.
Is it possible?

Yes, see below. This script was modified from one originally posted by
RobB:

<URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/41fc5fcdf69a934/eeb33edb6af79855?q=document.styleSheets&rnum=13&hl =en#eeb33edb6af79855>
There may be a better way to modify the actual rule, I've just used
string concatenation/replacement. You may be able to load all the
properties into an array and then write them back out again, that would
likely be more robust (note that IE uses uppercase and Mozilla lower
case, they also report colours differently, etc.).


In DOM-compliant browsers you can use getPropertyValue() and
setProperty(). cssText does not 'work' in Safari and none of the
style rule methods work at all in IE 5.2 (Mac), so looping is the go.

IE Mac pretends to support getPropertyValue but fails, and its version
of cssText has the curly braces around the text so to fix it you'd
have to test for cssText first, then test for curly braces to separate
IE 5.2 (and maybe IE 5 on Windows) from IE 6 and Firefox, then do the
string thing.

Then add an else for those browsers that do getProperty but not
cssText. I'll leave that up to you - the way it is coded below means
IE 5 just does nothing for the style rule method.

Unfortunately, modifying the display attribute of a table cell causes
Safari to collapse the width to the narrowest it can if the table has
more than about 300 rows. This happens regardless of which method is
used to modify the display attribute (looping or css rule).

Also, Safari supports the table cells collection but I can't figure
how to access the elements, so I've modified that part of the looping
method to use childNodes instead - it is effectively the same thing
but you may need a bit of feature detection and use one or the other.

I've noted changes below for wider browser support. Overall, the
looping method has wider support and is just as fast in most browsers
up to about 200 rows (but my testing wasn't exhaustive).

[...]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

<style type="text/css">
.col0 { background-color: #FFFF99; color: black; }
.col1 { background-color: #CED1FD; color: black; }
</style>
</head>
<body>

<textarea id="msg" rows="5" cols="80"></textarea><br>

<input type="button" value="Hide/show column 0 by looping" onclick="
hsCol( 'tableX', 0 );
">
<input type="button" value="Hide/show column 1 by looping" onclick="
hsCol( 'tableX', 1 );
"><br>
<input type="button" value="Hide/show class col0 by rule" onclick="
hsRule( 'tableX', 'col0' );
">
<input type="button" value="Hide/show class col1 by rule" onclick="
hsRule( 'tableX', 'col1' );
">

<script type="text/javascript">

function hsRule( t, cName ) {

/* Debug */
var msg = document.getElementById('msg')

t = document.getElementById( t );

if ( 'undefined' != typeof document.styleSheets ) {
var sheet = document.styleSheets;
var j, i = sheet.length,
s, rtype, rs, r, str;

while ( i-- ) {
s = sheet[i];

// Determine rule type - IE rules, Moz cssRules
rtype = ( typeof s.rules != 'undefined' ) ? 'rules' : 'cssRules';
if (typeof s[rtype] != 'undefined') {
rs = s[rtype];
j = rs.length;
while ( j-- ) {
r = rs[j];
Replace the following:
if ( '.'+cName == r.selectorText ) {
/* debug */
msg.value = 'Before\n'+r.selectorText + ' : ' + r.style.cssText ;
str = /display: none;/i;
if ( r.style.cssText.match( str ) ) {
r.style.cssText = r.style.cssText.replace( str, ';');
} else {
r.style.cssText += '; display: none;';
}
/* debug */
msg.value += '\nAfter\n'+r.selectorText + ' : ' + r.style.cssText ;
return;
}
with this:

if ( '.'+cName == r.selectorText ) {

if ( r.style.getPropertyValue ) {
var disp = r.style.getPropertyValue('display');
if ( ! disp || disp == '' || disp == 'table-cell' ) {
r.style.setProperty( 'display', 'none', null );
} else {
r.style.setProperty( 'display', null, null );
r.style.setProperty( 'width', '8em', null );
}
} else if ( r.style.cssText ) {
str = /display: none;/i;

if ( r.style.cssText.match( str ) ) {
r.style.cssText = r.style.cssText.replace( str, ';');
} else {
r.style.cssText += '; display: none;';
}
}
return;
}
}
}
}
}
Could add an 'else' here and call the looping function since the style
rule method has failed...
}

function hsCol( t, idx ){
t = document.getElementById( t );
var c;
var r = t.rows;
var i = t.rows.length;
if ( r[0].cells[idx] && document.body.style ) {
Modify to:

if ( r[0].childNodes[idx] && document.body.style ) {
while ( i-- ) {
c = r[i].cells[idx];
And the above to;

c = r[i].childNodes[idx];
c.style.display = ( 'none' == c.style.display )? '' : 'none';
}
}
}

// Generate a big table...
var rs = '<tr><td class="col0">row ';
var rm = ' cell 0</td><td class="col1">row ';
var re = ' cell 1</td></tr>';

document.write('<table id="tableX">');
for (var i=0; i<500; i++ ){
document.write( rs + i + rm + i + re );
}
document.write('</table>');

</script>

</body></html>


Using rules like .col0, .col1 {...} confused Firefox (Mac) but not
Safari, I can't test Windows IE right now.
--
Rob
Jul 23 '05 #3

P: n/a
The code worked great. Thanks for helping...

I did have to modify the
var str = /display: none;/i;
to read
var str = /display: none/i;
to get it to work in IE.

This is perfect... Thanks,
Scott

Jul 23 '05 #4

P: n/a


RobG wrote:
go**********@scottsavarese.com wrote:
[...]
I do have each cell in the column set up with classes. Its easy in
Javascript to set the style of each cell in the DOM. However, I was
wondering if there is a way to set the style of the class itself? For
example, I have the following class defined in CSS:
.columna { display: none; }

Yes, you can modify the style rule's text. Not pretty, but vastly
quicker than looping through a few hundred rows.

Using Javascript, is there a way to change the value of the style of
the class without having to iterate through each row and cell?


Yes.
Unfortunately I need to support both IE and Firefox, and for
supportability, I would prefer one solution that works on both OS's (I
already have tons of browser dependant code as it is).


Not 'unfortunate' really. It's a PITA anyway, adding support for DOM
and IE is just one more hassle.
Is it possible?


Yes, see below. This script was modified from one originally posted by
RobB:

<URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/41fc5fcdf69a934/eeb33edb6af79855?q=document.styleSheets&rnum=13&hl =en#eeb33edb6af79855>

There may be a better way to modify the actual rule, I've just used
string concatenation/replacement. You may be able to load all the
properties into an array and then write them back out again, that would
likely be more robust (note that IE uses uppercase and Mozilla lower
case, they also report colours differently, etc.).

This will probably not work in IE 5, from memory it prefixes rule
selectors (class names, etc.) with '*'.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

<style type="text/css">
.col0 { background-color: #FFFF99; color: black; }
.col1 { background-color: #CED1FD; color: black; }
</style>
</head>
<body>

<textarea id="msg" rows="5" cols="80"></textarea><br>

<input type="button" value="Hide/show column 0 by looping" onclick="
hsCol( 'tableX', 0 );
">
<input type="button" value="Hide/show column 1 by looping" onclick="
hsCol( 'tableX', 1 );
"><br>
<input type="button" value="Hide/show class col0 by rule" onclick="
hsRule( 'tableX', 'col0' );
">
<input type="button" value="Hide/show class col1 by rule" onclick="
hsRule( 'tableX', 'col1' );
">

<script type="text/javascript">

function hsRule( t, cName ) {

/* Debug */
var msg = document.getElementById('msg')

t = document.getElementById( t );

if ( 'undefined' != typeof document.styleSheets ) {
var sheet = document.styleSheets;
var j, i = sheet.length,
s, rtype, rs, r, str;

while ( i-- ) {
s = sheet[i];

// Determine rule type - IE rules, Moz cssRules
rtype = ( typeof s.rules != 'undefined' ) ? 'rules' : 'cssRules';
if (typeof s[rtype] != 'undefined') {
rs = s[rtype];
j = rs.length;
while ( j-- ) {
r = rs[j];
if ( '.'+cName == r.selectorText ) {
/* debug */
msg.value = 'Before\n'+r.selectorText + ' : ' + r.style.cssText ;
str = /display: none;/i;
if ( r.style.cssText.match( str ) ) {
r.style.cssText = r.style.cssText.replace( str, ';');
} else {
r.style.cssText += '; display: none;';
}
/* debug */
msg.value += '\nAfter\n'+r.selectorText + ' : ' + r.style.cssText ;
return;
}
}
}
}
}
}

function hsCol( t, idx ){
t = document.getElementById( t );
var c;
var r = t.rows;
var i = t.rows.length;
if ( r[0].cells[idx] && document.body.style ) {
while ( i-- ) {
c = r[i].cells[idx];
c.style.display = ( 'none' == c.style.display )? '' : 'none';
}
}
}

// Generate a big table...
var rs = '<tr><td class="col0">row ';
var rm = ' cell 0</td><td class="col1">row ';
var re = ' cell 1</td></tr>';

document.write('<table id="tableX">');
for (var i=0; i<500; i++ ){
document.write( rs + i + rm + i + re );
}
document.write('</table>');

</script>

</body></html>
--
Rob


Jul 23 '05 #5

P: n/a
Your code worked well... Thanks for the help. To get it to work with IE
I did have to make one change though. I had to change
var str = /display: none;/i;
to
var str = /display: none/i;
Once i got it working it was just what I needed... Much appreciated.

Thanks,
Scott

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.