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

javascriptjavascript 2023-08-28 11:21:27 1198
摘要： 在HTML中，表格用于以格式化的方式显示网页上的数据。该表包含显示数据的列和行。有时，开发人员需要删除表列或允许用户删除它们。例如，该表包含用户数据并具有“年龄”和“生日”列。在这种情况下，我们需要删除“年龄...

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

在 HTML 中，表格用于以格式化的方式显示网页上的数据。该表包含显示数据的列和行。

有时，开发人员需要删除表列或允许用户删除它们。例如，该表包含用户数据并具有“年龄”和“生日”列。在这种情况下，我们需要删除“年龄”列，因为我们可以从“生日”列中获取年龄。

开发人员可以使用deleteCell()方法删除任何特定列。在本教程中，我们将学习通过索引、类名和列名删除表列。另外，开发人员应该记住表列是从零开始的索引。

语法

用户可以按照以下语法使用deleteCell()方法删除表格中的任何特定列。

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

在上面的语法中，我们迭代每个表格行并从“索引”中删除单元格。这里，‘index’是要删除的列的索引。

示例1（按索引删除表格列）

在下面的示例中，我们创建了包含单词数字的表格。此外，我们通过在 CSS 中提供边框来设计表格的样式。每当用户单击该按钮时，我们都会执行 deleteColumn() 函数。

在deleteColumn()函数中，我们使用id访问表。此外，我们使用“rows”属性获取表的所有行，并使用数组的“length”属性计算总行数。

我们用 2 初始化“index”变量来删除第三列。之后，我们使用 for 循环来遍历表的所有行。我们使用 deleteCell() 方法删除每行中的第三个单元格。

在输出中，用户可以单击按钮从表中删除第三列。

<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>

示例2（通过标题文本删除表格列）

在下面的示例中，我们创建了包含食物数据的表。在此示例中，我们使用标题文本删除表格列。

在deleteColum()函数中，我们访问表的标题。之后，我们访问所有标题行。接下来，我们迭代标题行并找到包含“卡路里”作为内部 HTML 的标题索引。

找到列索引后，我们可以使用 for 循环和 tableCell() 方法从每一行中删除特定单元格，就像我们在第一个示例中所做的那样。

在输出中，用户应单击按钮删除“卡路里”列。

<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>

示例3（通过类名删除多个表列）

在下面的示例中，我们将学习使用类名删除表格的多列。

在这里，我们首先访问表的所有行，然后使用 for 循环对其进行迭代。之后，我们访问包含“额外”类名的特定行的所有单元格。我们使用 while 循环遍历所有单元格，并使用“cells[0].parentNode.removeChild(cells[0])”一一删除所有单元格。

在上面的代码中，单元格[0]是当前单元格。 “parentNode”引用其行，removeChild() 方法从该行中删除子节点。

在输出中，用户可以单击按钮从表中删除多列。

<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>

我们学会了使用 JavaScript 从表中删除列。我们在前 2 个示例中通过将列索引作为参数传递来使用 deleteCeil() 方法。在第三个示例中，我们使用removeChild()方法来删除特定的单元格。

标签：