Entry
How can I hide a table cell/its content?
Feb 22nd, 2001 05:01
Martin Honnen,
The following code works with NN4, NN6(besides of bugs which may make
it unreliable), IE4+ and Opera 5.
For NN4 it hides the cell content, for the other browsers the cell
content and the cell borders.
<HTML>
<HEAD>
<TITLE>
cell hiding/showing
</TITLE>
<STYLE>
.cell {
position: relative;
}
</STYLE>
<SCRIPT>
function hideCellContent (tableID, rowIndex, cellIndex) {
if (document.layers) {
if (typeof rowIndex != undefined)
var cell = document[tableID + 'CellR' + rowIndex + 'C' +
cellIndex];
cell.visibility = 'hide';
}
else if (window.opera) {
var cell = document.getElementById(tableID + 'CellR' + rowIndex +
'C' + cellIndex);
cell.style.visibility = 'hidden';
}
else if (document.all)
document.all[tableID].rows[rowIndex].cells[cellIndex].style.visibility =
'hidden';
else if (document.getElementById)
document.getElementById(tableID).rows[rowIndex].cells[cellIndex].style.v
isibility = 'hidden';
}
function showCellContent (tableID, rowIndex, cellIndex) {
if (document.layers) {
if (typeof rowIndex != undefined)
var cell = document[tableID + 'CellR' + rowIndex + 'C' +
cellIndex];
cell.visibility = 'show';
}
else if (window.opera) {
var cell = document.getElementById(tableID + 'CellR' + rowIndex +
'C' + cellIndex);
cell.style.visibility = 'visible';
}
else if (document.all)
document.all[tableID].rows[rowIndex].cells[cellIndex].style.visibility =
'visible';
else if (document.getElementById)
document.getElementById(tableID).rows[rowIndex].cells[cellIndex].style.v
isibility = 'visible';
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: void 0"
ONCLICK="hideCellContent('table0', 0, 0);
return true;"
>
hide 0, 0
</A>
|
<A HREF="javascript: void 0"
ONCLICK="hideCellContent('table0', 0 , 1);
return true;"
>
hide 0, 1
</A>
|
<A HREF="javascript: void 0"
ONCLICK="showCellContent('table0', 0, 0);
return true;"
>
show 0, 0
</A>
|
<A HREF="javascript: void 0"
ONCLICK="showCellContent('table0', 0 , 1);
return true;"
>
show 0, 1
</A>
<TABLE ID="table0" BORDER="1">
<TR>
<TD ID="table0CellR0C0"
CLASS="cell"
>
Kibology for all.
</TD>
<TD ID="table0CellR0C1"
CLASS="cell"
>
Kibology for all.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
