How to delete a column from an HTML table using JavaScript?-JS Tutorial-php.cn

How to delete a column from an HTML table using JavaScript?

WBOY

Release： 2023-08-23 23:57:06

forward

853 people have browsed it

如何使用 JavaScript 从 HTML 表中删除列？

In HTML, tables are used to display data on a web page in a formatted manner. The table contains columns and rows that display data.

Sometimes, developers need to delete table columns or allow users to delete them. For example, this table contains user data and has "age" and "birthday" columns. In this case we need to remove the "Age" column since we can get the age from the "Birthday" column.

Developers can delete any specific column using deleteCell() method. In this tutorial, we will learn to delete table columns by index, class name and column name. Additionally, developers should remember that table columns are zero-based indexes.

grammar

Users can delete any specific column in the table using the deleteCell() method according to the following syntax.

for (var i = 0; i < rowCount; i++) {
   table.rows[i].deleteCell(index);
}

Copy after login

In the above syntax, we iterate over each table row and remove the cell from the "index". Here, ‘index’ is the index of the column to be deleted.

Example 1 (Delete table column by index)

In the example below, we have created a table containing word numbers. Additionally, we style the table by providing borders in CSS. Whenever the user clicks the button, we execute the deleteColumn() function.

In the deleteColumn() function, we use id to access the table. Additionally, we use the "rows" property to get all the rows of the table and use the "length" property of the array to calculate the total number of rows.

We initialize the "index" variable with 2 to delete the third column. After that, we use a for loop to iterate through all the rows of the table. We use the deleteCell() method to delete the third cell in each row.

In the output, the user can click a 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>

Copy after login

Example 2 (Deleting table columns by title text)

In the example below, we create a table containing food data. In this example, we delete a table column using header text.

In the deleteColum() function, we access the title of the table. After that we access all header rows. Next, we iterate over the header rows and find the header index that contains "Calories" as the inner HTML.

After finding the column index, we can use a for loop and the tableCell() method to delete specific cells from each row, just like we did in the first example.

In the output, the user 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>

Copy after login

Example 3 (Delete multiple table columns by class name)

In the following example, we will learn to delete multiple columns of a table using class names.

Here, we first access all the rows of the table and then iterate over them using a for loop. After that we access all cells of a specific row that contain the "extra" class name. We use a while loop to loop through all cells and remove all cells one by one using "cells[0].parentNode.removeChild(cells[0])".

In the above code, cell[0] is the current cell. "parentNode" refers to its row from which the removeChild() method removes the child node.

In the output, the user can click a button to delete 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>

Copy after login

We learned to delete columns from a table using JavaScript. We used the deleteCeil() method in the first 2 examples by passing the column index as a parameter. In the third example, we use the removeChild() method to remove a specific cell.

The above is the detailed content of How to delete a column from an HTML table using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!