Hide table column using JavaScript
Hide table column using JavaScript
xxxxxxxxxx<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>Source: dotnetlearners.com
Closely Related Answers
xxxxxxxxxx<html> <head> <title>Hide table column using JavaScript</title> </head> <body> <table id="id_of_table" border="1"> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <tr> <td colspan="4"> <table> <tr> <td></td> </tr> </table> </td> </tr> <tr> <td>2</td> <td>two</td> <td>deux</td> <td>zwei</td> </tr> <tr> <td>3</td> <td>three</td> <td>trois</td> <td>drei</td> </tr> <tr> <td>4</td> <td>four</td> <td>quattre</td> <td>vier</td> </tr> <tr> <td>5</td> <td>five</td> <td>cinq</td> <td>fÜnf</td> </tr> <tr> <td>6</td> <td>six</td> <td>six</td> <td>sechs</td> </tr> </table> <button id="btnHide">hide French</button> <button id="btnShow">show French</button> </body> <script language="javascript"> function show_hide_column(col_no, do_show) { const table = document.getElementById("id_of_table"); const column = table.getElementsByTagName("col")[col_no]; if (column) { column.style.visibility = do_show ? "" : "collapse"; } } const btnHide = document.getElementById("btnHide"); btnHide.addEventListener("click", () => show_hide_column(2, false)); const btnShow = document.getElementById("btnShow"); btnShow.addEventListener("click", () => show_hide_column(2, true)); </script></html>Source: Grepper
Twitter 
LinkedIn