Hide table column using JavaScript


Example:

Enter Column Number :
(Enter column number in the Textbox and click on Hide Example:1,2,3,..)

Heading 1 Heading 2 Heading 3 Heading 4
R1C1 R1C2 R1C3 R1C4
R2C1 R2C2 R2C3 R2C4
R3C1 R3C2 R3C3 R3C4
R4C1 R4C2 R4C3 R4C4

Code Sample:

<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>