<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
How to Remove Column from
HTML Table using JavaScript ?
</
title
>
<
style
>
#myCol {
background: green;
}
table {
color: white;
margin: 0 auto;
}
td {
padding: 10px;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
GeeksForGeeks
</
h1
>
<
table
id
=
"table"
>
<
colgroup
>
<
col
id
=
"myCol"
span
=
"2"
>
<
col
style
=
"background-color:green"
>
</
colgroup
>
<
tr
>
<
th
>S.No</
th
>
<
th
>Title</
th
>
<
th
>Geek_id</
th
>
</
tr
>
<
tr
>
<
td
>Geek_1</
td
>
<
td
>GeekForGeeks</
td
>
<
th
>Geek_id_1</
th
>
</
tr
>
<
tr
>
<
td
>Geek_2</
td
>
<
td
>GeeksForGeeks</
td
>
<
th
>Geek_id_2</
th
>
</
tr
>
</
table
>
<
br
>
<
button
onclick
=
"Geeks()"
>
Click here
</
button
>
<
p
id
=
"GFG_DOWN"
style="color:green;
font-size: 20px; font-weight: bold;">
</
p
>
<
script
>
function Geeks() {
var el_down = document.getElementById("GFG_DOWN");
var tble = document.getElementById('table');
var row = tble.rows; // Getting the rows
for (var i = 0; i <
row
[0].cells.length; i++) {
// Getting the text of columnName
var
str
=
row
[0].cells[i].innerHTML;
// If 'Geek_id' matches with the columnName
if (str.search("Geek_id") != -1) {
for (var
j
=
0
; j < row.length; j++) {
// Deleting the ith cell of each row
row[j].deleteCell(i);
}
}
}
el_down.innerHTML
=
"Column is removed from the table."
;
}
</script>
</
body
>
</
html
>