Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Style Sheets 1

Status
Not open for further replies.
shawkz

shawkz

Programmer
Joined
Oct 25, 2005
Messages
84
Location
GB
Hi i am using javascript to hide/show rows in a table..

getStyleClass('RowC').style.display = 'none';

this isworking fine, but when i come to print the document all rows are displayed on the printout - even though on the screen they are hidden? Can any one help!!!

kindest thanks,

Steve Hawkz
 
Sort by date Sort by votes
Instead of:

Code: 
getStyleClass('RowC').style.display = 'none';

Try:

Code: 
getStyleClass('RowC')[!].className = 'noshow';[/!]

Then set up a new style class in the STYLE section in your HEAD such as:

Code: 
<style [b]media='all'[/b]>
.noshow{
 display:none;
}

.show{
 display:block;
}
</style>

The noshow class should hide the row on your screen AND on the printout. I only put the 'show' class there in case you wanted to "unhide" a row somehow.

I didn't actually test this, but this is the approach I would take.

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Thanks for replying - will try it out & let you know how i get on!!!
 
Upvote 0 Downvote
Cant seem to get it working correctly using css, is it possible to hide multiple rows with the same id instead using...

document.getElementById('RowA').style.display = "block";

if i do this at the moment it only hides 1 row, not the other 10+ rows in the table..

Any ideas???


 
Upvote 0 Downvote
Ok, if i add a number at the end of each id like Row1, Row2, etc... How can i hide/show rows. Id there a function to look at how many rows there are in a table that start like RowA, RowB, etc...

regards,

Alan
 
Upvote 0 Downvote
No... but if you used numbers instead of letters, you could do this:

Code: 
var rowNum = 1;
var rowObj = document.getElementById('Row' + rowNum);
while (rowObj) {
	rowObj.style.display = 'block';
	rowNum++;
	rowObj = document.getElementById('Row' + rowNum);
}

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Fantastic! thanks for your help!!! it works.. just need to simplify it a bit!!!

Code: 
function RectificationStatus(RowID){

	if (RowID == 0) 	{
		var rowNum = 1;
		var rowObj = document.getElementById('RowA' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'block';
	    	rowNum++;
	    	rowObj = document.getElementById('RowA' + rowNum);
		}	
		var rowNum = 1;
		var rowObj = document.getElementById('RowB' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'block';
	    	rowNum++;
	    	rowObj = document.getElementById('RowB' + rowNum);
		}
		var rowNum = 1;
		var rowObj = document.getElementById('RowC' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'block';
	    	rowNum++;
	    	rowObj = document.getElementById('RowC' + rowNum);
		}		
 		var rowNum = 1;
		var rowObj = document.getElementById('RowD' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'block';
	    	rowNum++;
	    	rowObj = document.getElementById('RowD' + rowNum);
		}
	}
	if (RowID == 1) 	{
		var rowNum = 1;
		var rowObj = document.getElementById('RowA' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'block';
	    	rowNum++;
	    	rowObj = document.getElementById('RowA' + rowNum);
		}	
		var rowNum = 1;
		var rowObj = document.getElementById('RowB' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowB' + rowNum);
		}
		var rowNum = 1;
		var rowObj = document.getElementById('RowC' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowC' + rowNum);
		}		
 		var rowNum = 1;
		var rowObj = document.getElementById('RowD' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowD' + rowNum);
		}
	}
	if (RowID == 2) 	{
		var rowNum = 1;
		var rowObj = document.getElementById('RowA' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowA' + rowNum);
		}	
		var rowNum = 1;
		var rowObj = document.getElementById('RowB' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'block';
	    	rowNum++;
	    	rowObj = document.getElementById('RowB' + rowNum);
		}
		var rowNum = 1;
		var rowObj = document.getElementById('RowC' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowC' + rowNum);
		}		
 		var rowNum = 1;
		var rowObj = document.getElementById('RowD' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowD' + rowNum);
		}
	}
	if (RowID == 3) 	{
		var rowNum = 1;
		var rowObj = document.getElementById('RowA' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowA' + rowNum);
		}	
		var rowNum = 1;
		var rowObj = document.getElementById('RowB' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowB' + rowNum);
		}
		var rowNum = 1;
		var rowObj = document.getElementById('RowC' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'block';
	    	rowNum++;
	    	rowObj = document.getElementById('RowC' + rowNum);
		}		
 		var rowNum = 1;
		var rowObj = document.getElementById('RowD' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowD' + rowNum);
		}
	}
	if (RowID == 4) 	{
		var rowNum = 1;
		var rowObj = document.getElementById('RowA' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowA' + rowNum);
		}	
		var rowNum = 1;
		var rowObj = document.getElementById('RowB' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowB' + rowNum);
		}
		var rowNum = 1;
		var rowObj = document.getElementById('RowC' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'none';
	    	rowNum++;
	    	rowObj = document.getElementById('RowC' + rowNum);
		}		
 		var rowNum = 1;
		var rowObj = document.getElementById('RowD' + rowNum);
			while (rowObj) {
	    	rowObj.style.display = 'block';
	    	rowNum++;
	    	rowObj = document.getElementById('RowD' + rowNum);
		}
	}
}

Kindest thanks
 
Upvote 0 Downvote
Fantastic! thanks for your help!!! it works.. just need to simplify it a bit!!!


function RectificationStatus(RowID){

if (RowID == 0) {
var rowNum = 1;
var rowObj = document.getElementById('RowA' + rowNum);
while (rowObj) {
rowObj.style.display = 'block';
rowNum++;
rowObj = document.getElementById('RowA' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowB' + rowNum);
while (rowObj) {
rowObj.style.display = 'block';
rowNum++;
rowObj = document.getElementById('RowB' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowC' + rowNum);
while (rowObj) {
rowObj.style.display = 'block';
rowNum++;
rowObj = document.getElementById('RowC' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowD' + rowNum);
while (rowObj) {
rowObj.style.display = 'block';
rowNum++;
rowObj = document.getElementById('RowD' + rowNum);
}
}
if (RowID == 1) {
var rowNum = 1;
var rowObj = document.getElementById('RowA' + rowNum);
while (rowObj) {
rowObj.style.display = 'block';
rowNum++;
rowObj = document.getElementById('RowA' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowB' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowB' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowC' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowC' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowD' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowD' + rowNum);
}
}
if (RowID == 2) {
var rowNum = 1;
var rowObj = document.getElementById('RowA' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowA' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowB' + rowNum);
while (rowObj) {
rowObj.style.display = 'block';
rowNum++;
rowObj = document.getElementById('RowB' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowC' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowC' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowD' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowD' + rowNum);
}
}
if (RowID == 3) {
var rowNum = 1;
var rowObj = document.getElementById('RowA' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowA' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowB' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowB' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowC' + rowNum);
while (rowObj) {
rowObj.style.display = 'block';
rowNum++;
rowObj = document.getElementById('RowC' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowD' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowD' + rowNum);
}
}
if (RowID == 4) {
var rowNum = 1;
var rowObj = document.getElementById('RowA' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowA' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowB' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowB' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowC' + rowNum);
while (rowObj) {
rowObj.style.display = 'none';
rowNum++;
rowObj = document.getElementById('RowC' + rowNum);
}
var rowNum = 1;
var rowObj = document.getElementById('RowD' + rowNum);
while (rowObj) {
rowObj.style.display = 'block';
rowNum++;
rowObj = document.getElementById('RowD' + rowNum);
}
}
}
 
Upvote 0 Downvote
That's just bloat! Surely you must have some desire to remove all of that duplication?

Try this instead:

Code: 
function setStatusOfRows(rowPrefix, displayMode) {
	var rowNum = 1;
	var rowObj = document.getElementById(rowPrefix + rowNum);
	while (rowObj) {
		rowObj.style.display = displayMode;
		rowNum++;
		rowObj = document.getElementById(rowPrefix + rowNum);
	}    
}

function RectificationStatus(RowID){

    if (RowID == 0) {
    	setStatusOfRows('RowA', 'block');
    	setStatusOfRows('RowB', 'block');
    	setStatusOfRows('RowC', 'block');
    	setStatusOfRows('RowD', 'block');
    } else if (RowID == 1) {
    	setStatusOfRows('RowA', 'block');
    	setStatusOfRows('RowB', 'none');
    	setStatusOfRows('RowC', 'none');
    	setStatusOfRows('RowD', 'none');
    } else if (RowID == 2) {
    	setStatusOfRows('RowA', 'none');
    	setStatusOfRows('RowB', 'block');
    	setStatusOfRows('RowC', 'none');
    	setStatusOfRows('RowD', 'none');
    } else if (RowID == 3) {
    	setStatusOfRows('RowA', 'none');
    	setStatusOfRows('RowB', 'none');
    	setStatusOfRows('RowC', 'block');
    	setStatusOfRows('RowD', 'none');
    } else if (RowID == 4) {
    	setStatusOfRows('RowA', 'none');
    	setStatusOfRows('RowB', 'none');
    	setStatusOfRows('RowC', 'none');
    	setStatusOfRows('RowD', 'block');
	}
}

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
All i have to say is "Genius" works a treat!!!

Kindest thanks...

Steve
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bradoirs
  • Locked
  • Question Question
Dynamic creation of variable to apply a style
Replies
4
Views
392
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question Question
Making functions to pass styles parameters
Replies
2
Views
319
lupidol
lupidol
GizmoFlufflinski
  • Locked
  • Question Question
Return an objects style values
Replies
4
Views
266
vacunita
vacunita
arunrr
  • Locked
  • Question Question
Controlling link style
Replies
3
Views
206
arunrr
arunrr
milo3169
  • Locked
  • Question Question
onkeypress will change the style class but changes back.
Replies
0
Views
120
milo3169
milo3169

Part and Inventory Search

Sponsor

Back
Top