Wie lösche ich mit JavaScript eine Spalte aus einer HTML-Tabelle?-js-Tutorial-php.cn

Wie lösche ich mit JavaScript eine Spalte aus einer HTML-Tabelle?

WBOY

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

nach vorne

889 Leute haben es durchsucht

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

In HTML werden Tabellen verwendet, um Daten auf einer Webseite formatiert anzuzeigen. Die Tabelle enthält Spalten und Zeilen, die Daten anzeigen.

Manchmal müssen Entwickler Tabellenspalten löschen oder Benutzern erlauben, sie zu löschen. Diese Tabelle enthält beispielsweise Benutzerdaten und verfügt über die Spalten „Alter“ und „Geburtstag“. In diesem Fall müssen wir die Spalte „Alter“ entfernen, da wir das Alter aus der Spalte „Geburtstag“ ermitteln können.

Entwickler können jede bestimmte Spalte mit der Methode deleteCell() löschen. In diesem Tutorial lernen wir, Tabellenspalten nach Index, Klassenname und Spaltenname zu löschen. Darüber hinaus sollten Entwickler bedenken, dass Tabellenspalten nullbasierte Indizes sind.

Grammatik

Benutzer können jede bestimmte Spalte in der Tabelle mit der Methode deleteCell() gemäß der folgenden Syntax löschen.

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

Nach dem Login kopieren

In der obigen Syntax durchlaufen wir jede Tabellenzeile und entfernen die Zelle aus dem „Index“. Dabei ist „index“ der Index der zu löschenden Spalte.

Beispiel 1 (Tabellenspalte nach Index löschen)

Im folgenden Beispiel haben wir eine Tabelle mit Wortnummern erstellt. Darüber hinaus gestalten wir die Tabelle, indem wir Rahmen in CSS bereitstellen. Immer wenn der Benutzer auf die Schaltfläche klickt, führen wir die Funktion deleteColumn() aus.

In der Funktion deleteColumn() verwenden wir die ID, um auf die Tabelle zuzugreifen. Zusätzlich verwenden wir die Eigenschaft „rows“, um alle Zeilen der Tabelle abzurufen, und verwenden die Eigenschaft „length“ des Arrays, um die Gesamtzahl der Zeilen zu berechnen.

Wir initialisieren die Variable „index“ mit 2, um die dritte Spalte zu löschen. Danach verwenden wir eine for-Schleife, um alle Zeilen der Tabelle zu durchlaufen. Wir verwenden die Methode deleteCell(), um die dritte Zelle in jeder Zeile zu löschen.

In der Ausgabe kann der Benutzer auf die Schaltfläche klicken, um die dritte Spalte aus der Tabelle zu löschen.

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

Nach dem Login kopieren

Beispiel 2 (Tabellenspalte nach Kopfzeilentext entfernen)

Im folgenden Beispiel haben wir eine Tabelle mit Lebensmitteldaten erstellt. In diesem Beispiel löschen wir eine Tabellenspalte mithilfe des Kopfzeilentexts.

In der Funktion deleteColum() greifen wir auf den Titel der Tabelle zu. Danach greifen wir auf alle Kopfzeilen zu. Als Nächstes durchlaufen wir die Headerzeilen und finden den Headerindex, der „Calories“ als inneren HTML-Code enthält.

Nachdem wir den Spaltenindex gefunden haben, können wir eine for-Schleife und die Methode tableCell() verwenden, um bestimmte Zellen aus jeder Zeile zu löschen, genau wie wir es im ersten Beispiel getan haben.

In der Ausgabe sollte der Benutzer auf die Schaltfläche klicken, um die Spalte „Kalorien“ zu löschen.

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

Nach dem Login kopieren

Beispiel 3 (Mehrere Tabellenspalten nach Klassennamen löschen)

Im folgenden Beispiel lernen wir, mehrere Spalten einer Tabelle mithilfe von Klassennamen zu löschen.

Hier greifen wir zunächst auf alle Zeilen der Tabelle zu und iterieren dann mithilfe einer for-Schleife darüber. Danach greifen wir auf alle Zellen einer bestimmten Zeile zu, die den „zusätzlichen“ Klassennamen enthalten. Wir verwenden eine While-Schleife, um alle Zellen zu durchlaufen und alle Zellen einzeln mit „cells[0].parentNode.removeChild(cells[0])“ zu entfernen.

Im obigen Code ist Zelle[0] die aktuelle Zelle. „parentNode“ bezieht sich auf seine Zeile, aus der die Methode „removeChild()“ den untergeordneten Knoten entfernt.

In der Ausgabe kann der Benutzer durch Klicken auf die Schaltfläche mehrere Spalten aus der Tabelle löschen.

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

Nach dem Login kopieren

Wir haben gelernt, mit JavaScript Spalten aus einer Tabelle zu löschen. In den ersten beiden Beispielen haben wir die Methode deleteCeil() verwendet, indem wir den Spaltenindex als Parameter übergeben haben. Im dritten Beispiel verwenden wir die Methode „removeChild()“, um eine bestimmte Zelle zu entfernen.

Das obige ist der detaillierte Inhalt vonWie lösche ich mit JavaScript eine Spalte aus einer HTML-Tabelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!