Entry
How do I hide/show a table column?
Feb 9th, 2001 06:02
Martin Honnen,
One way to do that with NN6 and IE4+ is to loop through all the rows of
a table and set the display of the relevant cell:
<HTML>
<HEAD>
<TITLE>
hiding/showing of table column
</TITLE>
<SCRIPT>
function hideColumn (colIndex) {
var table = document.all ? document.all.aTable :
document.getElementById('aTable');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[colIndex].style.display = 'none';
}
function showColumn (colIndex) {
var table = document.all ? document.all.aTable :
document.getElementById('aTable');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[colIndex].style.display = '';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="colIndex">
<SCRIPT>
for (var i = 0; i < 5; i++)
document.write('<OPTION VALUE="' + i + '">' + i);
</SCRIPT>
</SELECT>
<INPUT TYPE="button" VALUE="hide column"
ONCLICK="hideColumn(this.form.colIndex.selectedIndex);"
>
<INPUT TYPE="button" VALUE="show column"
ONCLICK="showColumn(this.form.colIndex.selectedIndex);"
>
</FORM>
<TABLE ID="aTable" BORDER="1">
<SCRIPT>
for (var i = 0; i < 3; i++) {
document.write('<TR>');
for (var j = 0; j < 5; j++)
document.write('<TD>' + i + ', ' + j + ' Kibology<\/TD>');
document.write('<\/TR>');
}
</SCRIPT>
</TABLE>
</BODY>
</HTML>
