473,846 Members | 1,975 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

javascript stylesheets

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.displ ay = "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.displ ay = "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
5 2564
go**********@sc ottsavarese.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.javas cript/browse_frm/thread/41fc5fcdf69a934/eeb33edb6af7985 5?q=document.st yleSheets&rnum= 13&hl=en#eeb33e db6af79855>

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><ti tle>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.getEle mentById('msg')

t = document.getEle mentById( t );

if ( 'undefined' != typeof document.styleS heets ) {
var sheet = document.styleS heets;
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.se lectorText + ' : ' + 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.s electorText + ' : ' + r.style.cssText ;
return;
}
}
}
}
}
}

function hsCol( t, idx ){
t = document.getEle mentById( t );
var c;
var r = t.rows;
var i = t.rows.length;
if ( r[0].cells[idx] && document.body.s tyle ) {
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">ro w ';
var rm = ' cell 0</td><td class="col1">ro w ';
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
RobG wrote:
go**********@sc ottsavarese.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.javas cript/browse_frm/thread/41fc5fcdf69a934/eeb33edb6af7985 5?q=document.st yleSheets&rnum= 13&hl=en#eeb33e db6af79855>
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 getPropertyValu e() 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 getPropertyValu e 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><ti tle>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.getEle mentById('msg')

t = document.getEle mentById( t );

if ( 'undefined' != typeof document.styleS heets ) {
var sheet = document.styleS heets;
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.se lectorText + ' : ' + 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.s electorText + ' : ' + r.style.cssText ;
return;
}
with this:

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

if ( r.style.getProp ertyValue ) {
var disp = r.style.getProp ertyValue('disp lay');
if ( ! disp || disp == '' || disp == 'table-cell' ) {
r.style.setProp erty( 'display', 'none', null );
} else {
r.style.setProp erty( 'display', null, null );
r.style.setProp erty( '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.getEle mentById( t );
var c;
var r = t.rows;
var i = t.rows.length;
if ( r[0].cells[idx] && document.body.s tyle ) {
Modify to:

if ( r[0].childNodes[idx] && document.body.s tyle ) {
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">ro w ';
var rm = ' cell 0</td><td class="col1">ro w ';
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
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


RobG wrote:
go**********@sc ottsavarese.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.javas cript/browse_frm/thread/41fc5fcdf69a934/eeb33edb6af7985 5?q=document.st yleSheets&rnum= 13&hl=en#eeb33e db6af79855>

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><ti tle>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.getEle mentById('msg')

t = document.getEle mentById( t );

if ( 'undefined' != typeof document.styleS heets ) {
var sheet = document.styleS heets;
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.se lectorText + ' : ' + 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.s electorText + ' : ' + r.style.cssText ;
return;
}
}
}
}
}
}

function hsCol( t, idx ){
t = document.getEle mentById( t );
var c;
var r = t.rows;
var i = t.rows.length;
if ( r[0].cells[idx] && document.body.s tyle ) {
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">ro w ';
var rm = ' cell 0</td><td class="col1">ro w ';
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
3012
by: Mariano López | last post by:
Hi. How can I make the following code (for Internet Explorer) work fine on Netscape 6 and Opera? document.createStyleSheet(); with (document.styleSheets(document.styleSheets.length-1)) { addRule("A.newslink","text-decoration:"+FDRlnkDec+";color:"+ FDRlnkCol); addRule("A.newslink:hover","color:"+ FDRhovCol); }
11
15758
by: George Hester | last post by:
I have a css file this is a portion of it: /* trackaccept.css */ div.track { width:400px; height: 100px; } I have this in my ASP page:
15
2238
by: Davide R. | last post by:
Ciao a tutti, vi spiego il mio problema Ho una pagina HTML che referenzia un CSS esterno. Ho alcuni elementi HTML che appartengolo ad una classe (chiamiamola "class1"). Avrei la necessità, alla pressione di un tasto di lanciare un javascript che mi cambia un attributo della classe "class1" (per esempio 'font-size', ma potrebbe essere qualsiasi altro attributo). Teoricamente potrei fare un loop in tutti gli elementi della pagina e
7
1987
by: Trvl Orm | last post by:
I am working with 2 frames, Left and Right and the main code is in the left frame, which has been attached. Can someone please help me with this code. I am new to JavaScript and can't figure it out. What needs to happen is this: On the left frame you should have a series of buttons, which when pushed makes things happen on the right frame.
1
3992
by: jbj | last post by:
I am trying to make a javascript function that can rewrite javascript rules dynamically (no, not the style tag of an individual element, but the actual rule in the <head> portion of the document). I have this code working in Mozilla (so I imagine Netscape browsers) but it gives me an error with IE. A few questions about it: First, here is my current code: <code> function expand(show)
6
3986
by: Fungii | last post by:
Hello, I have a stylesheet that sets p:first-letter to a certain size and colour. I was playing around with Javascript to change paragraph stylesheets using an array like this: var paras = document.all.tags("P"); Although I can change the paragraph colours using this array, the first letter of all the paragraphs remain the same
3
2175
by: Nathan Gilbert | last post by:
I am wanting to use javascript to select between different *.css files dependent on the user's browser. I am also wanting to generate the html document containing this javascript dynamically using PERL. So far, I have the javascript that does what I want to do, and it works fine as long as the the page was not generated by PERL. My problem is that when the javascript/html is generated by my PERL scripts the javascript never gets...
3
11600
by: mfc1981 | last post by:
Hi. I need to access to the hover style of an element with javascript. How can i do this? Best regards Manuel
2
4312
by: mark4asp | last post by:
Can I force the client to stop caching old stylesheets and javascript? In my dynamic web-site, I need to force the client to stop caching old versions of my stylesheets and javascript. Can I do this by including a querystring with the url with each external stylesheet and script file declaration? For example: <link type="text/css" rel="stylesheet" href="../images/menu.css?
0
9879
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9725
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10640
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10705
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
7877
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7050
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5714
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5906
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4111
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.