Hide/Show Multiple Tables 1

[Nebooaw]

Hi, i have a page containing hundreds of 1 row tables. Each table has an id which is either TableA, TableB, TableC

I am trying to write some script which will have a checkbox for each table type so i can hide/display any collection of tables. So far i can only get it to work when there is only one table with the same name.

I have tried row id, div id, etc... but all have the same problem. Can anyone help???


Kindest thanks.

 

[theboyhope]

ID is supposed to be unique. Try it with a class.

HTH.

 

[Nebooaw]

Have you an example? All the examples i have reference the table or row id.

Regards

 

[theboyhope]

Say you give all your tables of a particular type a class attribute "tableA", the others "tableB" and so on.

In your style sheet you could have:

.tableA { display: block; }
.tableB { display: block; }
.tableC { display: block; }

Now, to change the style rule for tableA, you could use a function like this:

function updateRule( ssIndex, rIndex, property, value ) {

	var StyleSheet = document.styleSheets[ssIndex], rule; 

	if( document.all ) {

		rule = StyleSheet.rules[rIndex]; 

	} else { 

		rule = StyleSheet.cssRules[rIndex]; 
	}

	rule.style.cssText = property + ":" + value + ";"; 
}

To change the display property of the tableA class you could call it like:

onclick="updateRule( 0, 0, 'display', 'none' );"

.


Here's some code for a test page:

<script>

function updateRule( ssIndex, rIndex, property, value ) {

	var StyleSheet = document.styleSheets[ssIndex], rule; 

	if( document.all ) {

		rule = StyleSheet.rules[rIndex]; 

	} else { 

		rule = StyleSheet.cssRules[rIndex]; 
	}

	rule.style.cssText = property + &quot;:&quot; + value + &quot;;&quot;; 
}

</script>


<style>
.tableA { display: block; }
.tableB { display: block; }
.tableC { display: block; }
</style>

<a onclick=&quot;updateRule( 0, 0, 'display', 'none' );&quot;>test</a>

<table class=&quot;tableA&quot;>
  <tr>
    <td>Table with class &quot;tableA&quot;</td>
  </tr>
</table>

<table class=&quot;tableA&quot;>
  <tr>
    <td>Table with class &quot;tableA&quot;</td>
  </tr>
</table>

<table class=&quot;tableB&quot;>
  <tr>
    <td>Table with class &quot;tableB&quot;</td>
  </tr>
</table>

<table class=&quot;tableB&quot;>
  <tr>
    <td>Table with class &quot;tableB&quot;</td>
  </tr>
</table>

<table class=&quot;tableC&quot;>
  <tr>
    <td>Table with class &quot;tableC&quot;</td>
  </tr>
</table>

<table class=&quot;tableC&quot;>
  <tr>
    <td>Table with class &quot;tableC&quot;</td>
  </tr>
</table>
[code]


I'm fairly certain that it could be adapted so you could just pass the selector but I don't have time at the moment. Maybe later tonight when I get home.

HTH.

 

[theboyhope]

Continued ...

You could just have this function:

function updateRule( selector, property, value ) {

    var StyleSheet = document.styleSheets[0], rule; 
    var rule = ( document.all ) ? StyleSheet.rules : StyleSheet.cssRules;

    for( i=0; i < rule.length; i++ ) {

        if( rule[i].selectorText == selector ) {

	    rule[i].style.cssText = property + &quot;:&quot; + value + &quot;;&quot;; 
        }
    }
}

Which you would call like:

updateRule( '.tableA', 'display', 'none' );/code]

I hope that's of some use to you. :)

PS I've just assumed you're not using a bunch of style sheets in this example.

 

[theboyhope]

I dunno why that silly

ÿ

character is in there. Just ignore it.

 

[Nebooaw]

Cheers, for that i will have a play when i get into work.

Kindest Thanks.

 

[Nebooaw]

Hi, your a star! i have just got it to work! Is there any way to toggle showing/hiding the tables using a check box?

Kindest thanks

 

[theboyhope]

If you changed your function to:

function updateRule( selector, checkbox ) {

    var StyleSheet = document.styleSheets[0], rule; 
    var rule = ( document.all ) ? StyleSheet.rules : StyleSheet.cssRules;
    var value = ( checkbox.checked ) ? "block" : "none";

    for( i=0; i < rule.length; i++ ) {

        if( rule[i].selectorText == selector ) {

            rule[i].style.cssText = &quot;display:&quot; + value + &quot;;&quot;; 
        }
    }
}

And the checkbox looked something like:

<label for=&quot;checkTableA&quot;>Table A</label>
<input type=&quot;checkbox&quot; id=&quot;checkTableA&quot; onclick=&quot;updateRule( '.tableA', this );&quot; checked />

How's that?

 

[Nebooaw]

Perfect! Works a treat.Your a star!

Thanks for all your help.