How to Remove Column from HTML Table using JavaScript ? - GeeksforGeeks

20 May, 2020
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.
<!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:
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.
<!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:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?