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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Show and Hide a Table Column 1

Status
Not open for further replies.
ReportingAnalyst

ReportingAnalyst

MIS
Oct 11, 2006
300
US
Hi,

Could help in giving me ideas as to how I can make this work? I would like to show and hide a table column by clicking on a a href link.

Code: 
<html>

<head>
<title>Show and Hide Table Column</title>
<script type="text/javascript">

function show_hide(obj){

var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;

for(var i = 0; i < lastRow; i++) {
	obj = document.getElementById('invisible').style;
	(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}
}

</script>
</head>

<body>
<a href="#" onClick="show_hide(this);">Show and Hide</a>
<table border="1" cellspacing="1" width="100%" height="96" id="tblSample">
  <tr>
    <td width="25%" height="19">Column1</td>
    <td width="25%" height="19">Column2</td>
    <td width="25%" height="19">Column3</td>
    <td id="invisible" width="25%" height="19">Column4</td>
  </tr>
  <tr>
    <td width="25%" height="19">a</td>
    <td width="25%" height="19">b</td>
    <td width="25%" height="19">c</td>
    <td id="invisible" width="25%" height="19">123</td>
  </tr>
  <tr>
    <td width="25%" height="19">d</td>
    <td width="25%" height="19">e</td>
    <td width="25%" height="19">f</td>
    <td id="invisible" width="25%" height="19">456</td>
  </tr>
  <tr>
    <td width="25%" height="19">g</td>
    <td width="25%" height="19">h</td>
    <td width="25%" height="19">i</td>
    <td id="invisible" width="25%" height="19">789</td>
  </tr>
</table>
</body>

</html>
 
Sort by date Sort by votes
There are a few fundamental things wrong with your code.

First, you have assigned the same id to 4 different elements. You cannot assign the same name for an id to multiple elements. Hence the reason the the method getElementById returns only one element reference - it's element by id, not element[!]s[/!] by id.

Second, in your loop where you attempt to grab all the <td> elements to make them show/hide, you aren't even referencing the i variable that is used in the for loop, so even if getElementById did return a reference to multiple elements, you aren't even using the variable to reference them.

Third, you have assigned a width of 25% to each of your 4 <td> elements on the table. When the 4th column disappears, you will have a total of 75% width from the <td> elements in the table. Are you wanting the space from the hidden <td> to completely remove itself, or do you want the hidden space still allocated, but left empty?

I'd take a step back and re-evaluate this problem from a new angle. Perhaps take a look into using name instead of id for the <td> elements, then you can use the getElementsByName method to access a reference to the <td>s that you wish to hide. Additionally, you are switching the display of the <td>s to block and none. <td> elements by default have display type of table-cell, so switching them between none and block may have different results in different browsers. You may also want to look into using the <col> html element to group the column together. Have a look at this link for different display types:


-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
I made some modifications, but how can I refer to all the table cells in that column which I wish to hide. When I try to do an alert of the number of cells with that name 'insible', I get a value of 0. why is that so?

Thanks.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>

<head>
<title>Show and Hide Table Column</title>
<style type="text/css">

.hideMe {
   display:none;
}

.showMe {
   display:block;
}

</style>

<script type="text/javascript">

function show_hide(obj){

var x=document.getElementsByName('invisible');
var l = x.length;
alert(l);

for(var i = 0; i < l; i++) {
	obj = document.getElementsByName('invisible').style;
	(obj.display == 'none')? obj.display = 'table-cell' : obj.display = 'none';
}
}

</script>
</head>

<body>
<a href="#" onClick="return show_hide();">Show and Hide</a>
<table border="1" cellspacing="1" width="100%" id="tblSample">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
    <td>Column3</td>
    <td name="invisible" style="display: table-cell">Column4</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td name="invisible" style="display: table-cell">123</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
    <td name="invisible" style="display: table-cell">456</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
    <td name="invisible" style="display: table-cell">789</td>
  </tr>
</table>
</body>

</html>
 
Upvote 0 Downvote
But as I was readig through the properties of the object table cell in the DOM documentation:


There is no name attribute for the table cell. I got this error too when I try to validate the above document in the
So how can I refer to the 4th column and hide it and close it with the click event of the a href link?

Thanks.
 
Upvote 0 Downvote
Well.... you still didn't address the 2nd issue I stated above:
Code: 
for(var i = 0; i < l; i++) {
    obj = document.getElementsByName('invisible').style;
    (obj.display == 'none')? obj.display = 'table-cell' : obj.display = 'none';
}

In the above code document.getElementsByName('invisible') returns an array of elements. You are then trying to reference the style property of the array. Arrays do not have a style property, html elements have a style property. Even though you have an array of html elements, that does not mean that the array itself inherits all the properties of what it contains.

[tt]obj = document.getElementsByName('invisible').style[/tt]

is basically the same as saying:

[tt]var a = new Array();
obj = a.style;[/tt]

And even past that problem, you are attempting to iterate thru the loop to access the html elements, but you are not using the variable i to specify which one of the elements you are attempting to access.

Also, in the code you provided you have already pulled the collection via document.getElementsByName and stored it in a variable named x, so you do not need to use the getElementsByName method every time you access the list, you can just use the variable x instead. Make the following changes:
Code: 
function show_hide(obj){
   var x = document.getElementsByName('invisible');
   var l = x.length;
   alert(l);
   for(var i = 0; i < l; i++) {
      x[!][i][/!].style.display = (x[!][i][/!].style.display == "none") ? 'table-cell' : 'none';
   }
}

If you're still having problems with all that then just skip using the name attribute and reference the rows and cells collections:
Code: 
[code]
function show_hide(obj){
   [!]var tbl = document.getElementById('tblSample')[/!];
   for(var i = 0; i < tbl.rows.length; i++) {
      [!]tbl.rows[i].cells[3][/!].style.display = ([!]tbl.rows[i].cells[3][/!].style.display == "none") ? 'table-cell' : 'none';
   }
}

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
When I try the 1st approach where I refer to the getElementsByName, then there is no effect. I am using IE 6.0. Is it because the TD can have no name attribute as mentioned in the DOM documentation.

When I try the 2nd approach, it makes the 4th column dissapear, but then what do I do to make it appear again.

Thanks.
 
Upvote 0 Downvote
Is it because the TD can have no name attribute as mentioned in the DOM documentation.
Click to expand...

I don't think it should make a difference to javascript, but you may be right.

When I try the 2nd approach, it makes the 4th column dissapear, but then what do I do to make it appear again.
Click to expand...

Your code should work as it is. It could possibly be that tbl.rows.cells[3].style.display == "none" is never evaluating to true. Throw some alerts in to see what the actual display value is. Also, you may have to do some level of browser sniffing to ensure that table-cell is a valid value to set the display property to. I'm not sure that it's supported by IE6 and below. If it's not, the you may have to play with other display types (possibly even block like you were trying in your first example, although semantically this is incorrect - it's just IE not behaving to standards as usual)

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
When I click on this button once, it is fine (makes the 4th column dissapears). When I click on the button again, then I can see an error in the Java Console:

Could not get the display property. Invalid argument
Line 12

Line 12 refers to:

Code: 
tbl.rows[i].cells[3].style.display = (tbl.rows[i].cells[3].style.display == "none") ? 'table-cell' : 'none';

Thanks.
 
Upvote 0 Downvote
When I put in an alert,
Code: 
function show_hide(obj){
   var tbl = document.getElementById('tblSample');
   for(var i = 0; i < tbl.rows.length; i++) {
		alert(tbl.rows[i].cells[3].style.display);
      tbl.rows[i].cells[3].style.display = (tbl.rows[i].cells[3].style.display == "none") ? 'table-cell' : 'none';
   }
}

I can see all the cells in Column 4 dissapear. When I click on the button again to make it re-appear again, the alert message gives me a value of 'none'. Is this 'none' the value for the style: display?

My html script is:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>

<head>
<title>Show and Hide Table Column</title>

<script type="text/javascript">

function show_hide(obj){
   var tbl = document.getElementById('tblSample');
   for(var i = 0; i < tbl.rows.length; i++) {
		alert(tbl.rows[i].cells[3].style.display);
      tbl.rows[i].cells[3].style.display = (tbl.rows[i].cells[3].style.display == "none") ? 'table-cell' : 'none';
   }
}

</script>
</head>

<body>

<table border="1" cellspacing="1" width="100%" id="tblSample">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
    <td>Column3</td>
    <td name="invisible" style="display: table-cell">Column4</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td name="invisible" style="display: table-cell">123</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
    <td name="invisible" style="display: table-cell">456</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
    <td name="invisible" style="display: table-cell">789</td>
  </tr>
</table>
<input type="button" onClick="show_hide(this);" value="Show and Hide" />
</body>

</html>
 
Upvote 0 Downvote
Stepping into the thread this late... let me suggest another way of writing the same code:

Code: 
tbl.rows[i].cells[3].style.display = (tbl.rows[i].cells[3].style.display == "table-cell") ? 'none' : 'table-cell';

The reason is that unless you explicitly set the display property of the node using javascript (or have a style property on the node inline), it will return empty string.

Another solution is to put style="display:none;" on the node inline.

Cheers,
Jeff

PS: I bet I totally got the wrong end of the stick [smile]

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Here's my test:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function showHide() {
   var tbl = document.getElementById("blah");
   for(var i = 0; i < tbl.rows.length; i++) {
      alert(tbl.rows[i].cells[3].style.display);
      tbl.rows[i].cells[3].style.display = (tbl.rows[i].cells[3].style.display == "none") ? "table-cell" : "none";
      alert(tbl.rows[i].cells[3].style.display);
   }
   return false;
}

</script>
</head>
<body>
<table id="blah">
   <tr>
      <td>cell 0,0</td>
      <td>cell 0,1</td>
      <td>cell 0,2</td>
      <td>cell 0,3</td>
   </tr>
   <tr>
      <td>cell 1,0</td>
      <td>cell 1,1</td>
      <td>cell 1,2</td>
      <td>cell 1,3</td>
   </tr>
   <tr>
      <td>cell 2,0</td>
      <td>cell 2,1</td>
      <td>cell 2,2</td>
      <td>cell 2,3</td>
   </tr>
   <tr>
      <td>cell 3,0</td>
      <td>cell 3,1</td>
      <td>cell 3,2</td>
      <td>cell 3,3</td>
   </tr>
</table>
<a href="#" onclick="return showHide()">show/hide</a>
</body>
</html>

Works fine in firefox. As you can see from the alerts the cells change from none to table-cell.

In IE, it's a different story. I used IE7 and I saw the same error you did. So I changed the code to this and it worked:
Code: 
tbl.rows[i].cells[3].style.display = (tbl.rows[i].cells[3].style.display == "none") ? '[!]block[/!]' : 'none';

The problem is that IE does not support the semantically correct table-cell display property. This was the suggestion I made from above:
If it's not, the you may have to play with other display types ([!]possibly even block[/!] like you were trying in your first example.....)
Click to expand...

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
760
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
632
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
658
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
707
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
597
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top