javascript stylesheets

G

googlegroups

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
 
R

RobG

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; }
Click to expand...


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).
Click to expand...

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

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

<URL:http://groups-beta.google.com/group...nt.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;

// 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.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>
 
R

RobG

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

But older platforms have patchy support for changing css rules on the fly.
Not 'unfortunate' really. It's a PITA anyway, adding support for DOM
and IE is just one more hassle.



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

<URL:http://groups-beta.google.com/group...nt.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.).
Click to expand...

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;

// 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];
Click to expand...


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;
}
Click to expand...

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;
}


}
}
}
}
Click to expand...

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 ) {
Click to expand...

Modify to:

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


And the above to;

c = r.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>
Click to expand...

Using rules like .col0, .col1 {...} confused Firefox (Mac) but not
Safari, I can't test Windows IE right now.
 
G

googlegroups

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
 
G

googlegroups

RobG said:
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; }
Click to expand...


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).
Click to expand...

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

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

<URL:http://groups-beta.google.com/group...nt.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;

// 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.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>
Click to expand...
 
G

googlegroups

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript DOM 1
Image shifts to the right when export the page to pdf 4
Help with my responsive home page 2
Check forms With JavaScript 1
How to have two html audio players on one page? 0
Add recipes using JavaScript in table 20
Survey details won't go through using php, ajax, Mysql 0
Sort by number of characters 1

Members online

Total: 30 (members: 1, guests: 29)
Robots: 443

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top