Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Remove Column from HTML Table using JavaScript?
In HTML, the table is used to show the data on the web page in a formatted way. The table contains the columns and rows to show the data.
Sometimes, developers need to delete the table column or allow users to delete them. For example, the table contains the users’ data and has the ‘age’ and ‘birthdate’ columns. In such cases, we require to delete the ‘age’ column as we can get the age from the ‘birthdate’ column.
Developers can use the deleteCell() method to delete any particular column. In this tutorial, we will learn to delete the table column by index, class name, and column name. Also, developers should keep in mind that table columns are zero-based indexes.
Syntax
Users can follow the syntax below to use the deleteCell() method to delete any particular column of the table.
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(index);
}
In the above syntax, we iterate through each table row and delete the cell from the ‘index’. Here, ‘index’ is the index of the column to be deleted.
Example 1 (Deleting the table column by index)
In the example below, we created the table containing the numbers in words. Also, we styled the table by giving borders in the CSS. Whenever users click the button, we execute the deleteColumn() function.
In the deleteColumn() function, we access the table using the id. Also, we get all rows of tables using the ‘rows’ property and count the total number of rows using the ‘length’ property of the array.
We initialized the ‘index’ variable with 2 to delete the third column. After that, we use for loop to iterate through all rows of the table. We use the deleteCell() method to delete the third cell from each row.
In the output, users can click the button to delete the third column from the table.
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
<table id = "test">
<tr>
<th> First </th>
<th> Second </th>
<th> Third </th>
<th> Fourth </th>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td> 9 </td>
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
</table>
<br> <br>
<button onclick = "deleteColumn()"> Delete Column </button>
<script>
function deleteColumn() {
var table = document.getElementById("test");
var rowCount = table.rows.length;
let index = 2;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(index);
}
}
</script>
</html>
Example 2 (Deleting the table column by header text)
In the example below, we created the table containing the food data. We delete the table column using the header text in this example.
In the deleteColum() function, we access the table's header. After that, we access all header rows. Next, we iterate through the header rows and find the index of the header containing the ‘calories’ as an inner HTML.
After finding the column index, we can use the for loop and tableCell() method to delete the particular cell from every row as we have done in the first example.
In the output, users should click the button to delete the ‘calories’ column.
<html>
<head>
<style>
table {border-collapse: collapse;}
td, th {border: 1px solid black; padding: 8px; }
</style>
</head>
<body>
<h3>Using the <i>deleteCell() method</i> to delete the table columns using JavaScript </h3>
<table id="food">
<tr>
<th>Food Name</th>
<th>Price</th>
<th>Calories</th>
</tr>
<tr>
<td>Apple</td>
<td>99</td>
<td>95</td>
</tr>
<tr>
<td>Banana</td>
<td>89</td>
<td>105</td>
</tr>
<tr>
<td>Orange</td>
<td>79</td>
<td>85</td>
</tr>
</table>
<br> <br>
<script>
function deleteColumn() {
// get a table
var table = document.getElementById('food');
// get header row
var headerRow = table.getElementsByTagName('tr')[0];
// get headers
var headers = headerRow.getElementsByTagName('th');
// find column index
for (var i = 0; i < headers.length; i++) {
if (headers[i].innerHTML === "Calories") {
var columnIndex = i;
break;
}
}
// use column index to delete cells
if (columnIndex !== undefined) {
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(columnIndex);
}
}
}
</script>
<button onclick="deleteColumn()">Delete Column</button>
</body>
</html>
Example 3 (Removing the multiple table columns by class name)
In the example below, we will learn to delete the multiple columns of the table by using the class name.
Here, we access all rows of the table first and use for loop to iterate through it. After that, we access all cells of a particular row containing the ‘extra’ class name. We use a while loop to iterate through all cells and delete all cells one by one using the ‘cells[0].parentNode.removeChild(cells[0])’.
In the above code, cell [0] is the current cell. The ‘parentNode’ refers to its row, and the removeChild() method removes the child from that row.
In the output, users can click the button to remove multiple columns from the table.
<html>
<head>
<style>
table { border-collapse: collapse;}
td, th {border: 1px solid black; padding: 8px;}
</style>
</head>
<body>
<h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
<table id = "HTMLtable">
<tr>
<th> Column 1 </th>
<th class = "extra"> Column 2 </th>
<th >Column 3 </th>
<th class = "extra"> Column 4 </th>
</tr>
<tr>
<td> Row 1, Column 1 </td>
<td class = "extra"> Row 1, Column 2 </td>
<td> Row 1, Column 3 </td>
<td class = "extra"> Row 1, Column 4 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td class = "extra"> Row 2, Column 2 </td>
<td> Row 2, Column 3 </td>
<td class = "extra"> Row 2, Column 4 </td>
</tr>
<tr>
<td> Row 3, Column 1 </td>
<td class = "extra"> Row 3, Column 2 </td>
<td> Row 3, Column 3 </td>
<td class = "extra"> Row 3, Column 4 </td>
</table> <br> <br>
<button onclick="deleteColumn()"> Delete Column </button>
<script>
function deleteColumn() {
var table = document.getElementById('HTMLtable');
var rows = table.getElementsByTagName('tr');
// iterate through rows
for (var i = 0; i < rows.length; i++) {
// get cells with className 'extra'
var cells = rows[i].getElementsByClassName('extra');
// delete cells
while (cells.length > 0) {
cells[0].parentNode.removeChild(cells[0]);
}
}
}
</script>
</html>
We learned to remove the columns from the table using JavaScript. We use the deleteCeil() method in the first 2 examples by passing the column index as a parameter. In the third example, we used the removeChild() method to remove the particular cell.
2K+ Views
