如何使用 JavaScript 從 HTML 表中刪除列？-js教程-PHP中文網

如何使用 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()方法來刪除特定的儲存格。

以上是如何使用 JavaScript 從 HTML 表中刪除列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！