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
