<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>| Code Example |
|---|
| Html :: transparent navbar |
| Html :: textboxfor required |
| Html :: h1 html |
| Html :: html show and hide div |
| Html :: bulma cdn |
| Html :: html hex color |
| Html :: change fill color using javascript |
| Html :: how to make multiple pages html |
| Html :: which is right <hr or <hr/ in html |
| Html :: how to stop html audio |
| Html :: how to make bold text in html |
| Html :: html audio tag |
| Html :: simple html dom |
| Html :: bootstrap 5 official website |
| Html :: html components |
| Html :: bootstrap 5 card common |
| Html :: tailwind css width 50 percent |
| Html :: common sample sql databases for practice |
| Html :: input type html |
| Html :: html body tag |
| Html :: collapsible accordion html+css only |
| Html :: html boilerplate |
| Html :: bootstrap 4.5 product grid |
| Html :: input submit text |
| Html :: how to make a calendar using html and css and javascript |
| Html :: font jrxml |
| Html :: w3c valid html boilerplate |
| Html :: html entity close x |
| Html :: simple mask money |
| Html :: flask base models |