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

给定一个 HTML 表，任务是从 HTML 表中删除特定列。下面讨论两种方法：

方法一：首先选择表格，同时使用table.rows获取表格的行。获取一行的列数并遍历每一列。使用str.search(“someColumnName”) （因为，我们要删除带有一些 columnName 的列）来匹配当前列名和我们要删除的列名。如果列名匹配，则通过遍历表的每一行，通过 .deleteCell(i) 方法（其中，i 是列索引）删除其每个单元格。

示例：此示例实现了上述方法。

  

    
        How to Remove Column from
        HTML Table using JavaScript ?
    
  
    
        #myCol {
            background: green;
        }
  
        table {
            color: white;
            margin: 0 auto;
        }
  
        td {
            padding: 10px;
        }
    

  

  
    
        GeeksForGeeks
    
      
    
                                        
  
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    


S.NoTitleGeek_idGeek_1GeekForGeeksGeek_id_1Geek_2GeeksForGeeksGeek_id_2
    
  
    
        Click here
    
      
    
    
  
    
        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.";
        }
    

  

输出：

方法二：选择表格，通过table.rows遍历整个表格获取表格的行。获取变量中的列索引（我们要删除的列）。通过遍历表的每一行，通过 .deleteCell(i) 方法（其中，i 是列索引）删除每个单元格。

示例：此示例实现了上述方法。

  

    
        How to Remove Column from HTML
        Table using JavaScript ?
    
  
    
        #myCol {
            background: green;
        }
  
        table {
            color: white;
            margin: 0 auto;
        }
  
        td {
            padding: 10px;
        }
    

  

  
    
        GeeksForGeeks
    
      
    
                                        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    


S.NoTitleGeek_idGeek_1GeekForGeeksGeek_id_1Geek_2GeeksForGeeksGeek_id_2
    
    
        Click here
    
    
    
  
    
        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.";
        }
    

  

输出：