How do I leave the space of a td when JQuery Hides it?

I have this function:
 $(function(){
                $('table#id1 tr').each(function() {
                    $(this).children('table#id1 td').not('#text').hide();
                });
                $('table#id1 tr').hover(function() {
                    $(this).children('table#id1 td').not('#text').show();
                }, function() {
                    $(this).children('table#id1 td').not('#text').hide();
                });
            });

\this function works right, it hides the tds of the table but it removes it space to. How can I leave the space of those tds and hide only their content?
randomstAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
Is this the kind you are looking for?

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
---
<TABLE id="id1">
<TR>
	<TD>1</TD>
	<TD>2</TD>
</TR>
<TR>
	<TD>3</TD>
	<TD>4</TD>
</TR>
</TABLE>
---

<script>
$(document).ready(function(){
	$('table#id1 tr').each(function() {
		$(this).children('table#id1 td').css("color", "white");
	});
	$('table#id1 tr').hover(function() {
		$(this).children('table#id1 td').not('#text').show();
		//$(this).children('table#id1 td').not('#text').show();
		$(this).children('table#id1 td').css("color", "black");
	}, function() {
		//$(this).children('table#id1 td').not('#text').hide();
		$(this).children('table#id1 td').css("color", "white");
	});
});

</script>

Open in new window

randomstAuthor Commented:
no this function just makes the text white.
1. I dont use a white bachground
2. I have buttons in it which cannot hide with this code
StealthyDevCommented:
I think, this is the one you are looking for!!!



<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
---
<TABLE id="id1">
<TR>
	<TD>&nbsp;<span>1</span></TD>
	<TD>&nbsp;<span>2</span></TD>
</TR>
<TR>
	<TD>&nbsp;<span>3</span></TD>
	<TD>&nbsp;<span>4</span></TD>
</TR>
</TABLE>
---

<script>
$(document).ready(function(){
	$('table#id1 tr').each(function() {
		$(this).children('table#id1 td').children("span").fadeOut();
	});
	$('table#id1 tr').hover(function() {
		$(this).children('table#id1 td').children("span").fadeIn();
		//$(this).children('table#id1 td').not('#text').show();
		//$(this).children('table#id1 td').css("color", "black");
	}, function() {
		//$(this).children('table#id1 td').not('#text').hide();
		$(this).children('table#id1 td').children("span").fadeOut();
	});
});

</script>

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

randomstAuthor Commented:
tried it but doesnt seem to work..
StealthyDevCommented:
What didnt work?

Can you please explain me what you are really looking for?
randomstAuthor Commented:
i dont want the function to romove the tds.. just to hide their content(which includes buttons too) and on mouse over to show them back. The function you provided doeasnt hide anything
StealthyDevCommented:
Have you tried to execute the HTML page?

Just download both the files attached.

Try running td-hide-show.html file in a browser.

Please Revert.

td-hide-show.html
jquery-1.4.2.min.js

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
randomstAuthor Commented:
Thanks for your help I found what was the problem. It was the way i was defining my table. I had width="100%" and thats when the tds were hidden the row was fetching the other tds.
randomstAuthor Commented:
Thanks for your time
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.