How to Remove Column from HTML Table using JavaScript ?
Last Updated :
02 Aug, 2024
Given an HTML table and the task is to remove the certain column from the HTML table. There are two approaches that are discussed below:
Approach 1: First, select the table and also get the rows of table using table.rows. Get the number of columns of a row and go through each one of the columns. Use str.search("someColumnName") (Because, we want to remove the column with some columnName) to match the current column name and the column name that we want to remove. If the column name matches then delete its every cell by .deleteCell(i) method (where, i is the column index) by traversing the each row of the table.
Example: This example implements the above approach.
html
<!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>
Output: The first image has the Initial table and After clicking the Click here button the Title Column will be removed from the table
Approach 2: Select the table and get the rows of table using table.rows to traverse through the whole table. Get the column index in a variable (Column that we want to remove). Delete each cell by .deleteCell(i) method (where, i is the column index) by traversing the each row of the table.
Example: This example implements the above approach.
html
<!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");
// Getting the table
var tble = document.getElementById('table');
// Getting the rows in table.
var row = tble.rows;
// Removing the column at index(1).
var i = 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>
Output:
The first image has the Initial table and After clicking the Click here button the Title Column will be removed from the table
Similar Reads
How to remove an HTML element using JavaScript ? Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions
3 min read
How to remove all rows from a table in JavaScript ? Given an HTML document that contains an HTML table, the task is to remove all rows from the HTML table. Removing all rows is different from removing a few rows. This can be done by using JavaScript. Here we have two Approaches to removing all rows from a table: Table of Content Using remove() metho
2 min read
How to Create an HTML Table from an Object Array Using JavaScript ? Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil
2 min read
How to export HTML table to CSV using JavaScript ? Comma Separated Values or CSV is a type of text file where each value is delimited by a comma. CSV files are very useful for the import and export of data to other software applications.Sometimes while developing web applications, you may come into a scenario where you need to download a CSV file co
6 min read
How to Access <tr> element from Table using JavaScript ? Given an HTML table and the task is to access the table element from the Controller and highlight any row that we want. Approach: We will use a basic DOM operation in JavaScript to access table row element. We will be adding highlight class to the row that we click, if the highlight class is already
2 min read
How to Convert HTML Table to JSON in JavaScript? HTML tables are commonly used to present structured data on websites. In many scenarios, this tabular data needs to be converted to JSON format for processing, storage, or server communication. We will discuss different approaches to converting HTML tables to JSON using JavaScript.These are the foll
3 min read