<html>
<head>
<title>Hide table column using JavaScript</title>
<script language="javascript">
function hideCol() {
var col = document.getElementById("txtCol").value;
if (isNaN(col) || col == "") {
alert("Invalid Column");
return;
}
col = parseInt(col, 10);
col = col - 1;
var tbl = document.getElementById("tblMain");
if (tbl != null) {
if (col < 0 || col >= tbl.rows.length - 1) {
alert("Invalid Column");
return;
}
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++) {
tbl.rows[i].cells[j].style.display = "";
if (j == col)
tbl.rows[i].cells[j].style.display = "none";
}
}
}
}
</script>
</head>
<body>
<center>
Enter Column Number :
<input type="text" id="txtCol" /><input type="button" value="Hide" onclick="hideCol();" />
<br />
(Enter column number in the Textbox and click on Hide Example:1,2,3,..)
<br />
<br />
</center>
<table align="center" id="tblMain" border="1" style="cursor: pointer;">
<tr>
<td>
Heading 1
</td>
<td>
Heading 2
</td>
<td>
Heading 3
</td>
<td>
Heading 4
</td>
</tr>
<tr>
<td>
R1C1
</td>
<td>
R1C2
</td>
<td>
R1C3
</td>
<td>
R1C4
</td>
</tr>
<tr>
<td>
R2C1
</td>
<td>
R2C2
</td>
<td>
R2C3
</td>
<td>
R2C4
</td>
</tr>
<tr>
<td>
R3C1
</td>
<td>
R3C2
</td>
<td>
R3C3
</td>
<td>
R3C4
</td>
</tr>
<tr>
<td>
R4C1
</td>
<td>
R4C2
</td>
<td>
R4C3
</td>
<td>
R4C4
</td>
</tr>
</table>
</body>
</html>