Eine Tabelle mit jQuery erstellen

1. Erstellen Sie eine Tabelle mit jQuery, indem Sie den Tabelleninhalt als Zeichenfolge verwenden
2. Erstellen einer Tabelle mit jQuery durch Erstellen einer Tabelleninstanz

Mit Hilfe der jQuery-Bibliothek können wir unserem Inhalt neue Tabellenzeilen hinzufügen und das Tabellenelement erstellen. Wir werden uns für grundlegende Schleifenarbeiten entscheiden, um sicherzustellen, dass unsere Daten oder Ausgabemuster in einem Tabellenformat gestapelt werden.

Wir werden zwei Beispiele untersuchen, eines, das die Tabellen-Tags und den Inhalt als Zeichenfolge akzeptiert. Später wird es durch Anhängen als Tabelle im HTML-Body konfiguriert.

Das Erstellen von Tabellenelementen als Zeichenfolgen kann jedoch die spätere Anpassung behindern. In unserem zweiten Beispiel erstellen wir also eine Instanz eines Tabellenelements und können somit durch Angabe der Attribute (id, class) die Eigenschaften des Tabelleninhalts ändern.

Lassen Sie uns eine gründliche Überprüfung durchführen, um zu verstehen.

Erstellen Sie eine Tabelle mit jQuery, indem Sie den Tabelleninhalt als Zeichenfolge verwenden

Hier nehmen wir eine Variable, um das Start-Tag der Tabellenelemente zu speichern, den Inhalt hinzuzufügen und das End-Tag. Im nächsten Schritt hängen wir diese Summe oder Sammlung von Strings an das von uns betrachtete div an.

Das grundlegende Problem wäre, dass wir die Eigenschaften für Tabellendaten oder Tabellenzeilen nicht neu initialisieren können. Lassen Sie uns die Codezeilen überprüfen.

Code-Auszug:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
   var content = "<table>"
   for(i=0; i<3; i++){
       content += '<tr><td>' + 'output ' +  i + '</td></tr>';
   }
   content += "</table>"
   
   $('#tab').append(content);
</script>

Ausgabe:

Erstellen einer Tabelle mit jQuery durch Erstellen einer Tabelleninstanz

Wir werden erwägen, die Instanz für eine Tabelle zusammen mit ihren Attributen id und class zu erstellen. Später können wir je nach Präferenz die Eigenschaften ändern.

Die Code Fences beschreiben dies expliziter.

Code-Auszug:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
   var table = $('<table>');
   for(i=0; i<3; i++){
      var row = $('<tr>').text('output ' + i).addClass('rows');
      row.addClass('rows').css({'color':'red'});
      table.append(row);
   }
   
   $('#tab').append(table);
</script>

Ausgabe: