jquery konvertiert Tabellenzeilen in Spalten

Bei der Frontend-Entwicklung geht es häufig um die Verarbeitung und Anzeige von Tabellendaten. Manchmal müssen wir Tabellenzeilen für eine bessere Anzeige oder Datenverarbeitung in Spalten umwandeln. jQuery ist eine leichtgewichtige JavaScript-Bibliothek, die praktische DOM-Manipulations- und Ereignisverarbeitungsmethoden bereitstellt und diesen Vorgang zur Konvertierung von Tabellendaten einfach und unkompliziert macht. In diesem Artikel wird erläutert, wie Sie mit jQuery Tabellenzeilen in Spalten konvertieren.

Warum müssen wir Tabellenzeilen in Spalten umwandeln?

In der tatsächlichen Entwicklung müssen wir Tabellendaten manchmal detaillierter anzeigen und verarbeiten. In einer Tabelle stellt beispielsweise eine Zeile ein Produkt dar und jede Spalte stellt die Attribute des Produkts dar. Wenn wir alle Produkte anhand ihrer Attribute klassifizieren oder vergleichen möchten, müssen wir die Tabellenzeilen in Spalten umwandeln. Die konvertierte Tabelle kann Produktattribute oder Unterschiede zwischen Attributen klarer darstellen und erleichtert so Benutzern oder Entwicklern die Verarbeitung und Analyse von Daten.

Die Idee, Tabellenzeilen in Spalten umzuwandeln

Um Tabellenzeilen in Spalten umzuwandeln, müssen wir die Daten in der Tabelle über JavaScript/jQuery lesen und sie zu einer neuen Tabelle zusammensetzen. Die konkreten Implementierungsideen lauten wie folgt:

1. Zuerst müssen wir alle Daten in der Tabelle lesen und die Struktur der Tabellendaten und die Bedeutung jeder Spalte verstehen.
2. Verarbeiten Sie die Daten und extrahieren Sie Zeilenüberschriften, Spaltenüberschriften und Daten.
3. Stellen Sie die neue Tabellenstruktur zusammen und fügen Sie die verarbeiteten Daten hinzu.

Schritte zum Implementieren von jQuery zum Konvertieren von Tabellenzeilen in Spalten

Lassen Sie uns nun Schritt für Schritt den Vorgang des Konvertierens von Tabellenzeilen in Spalten implementieren.

1. Bereiten Sie eine Tabellenstruktur vor, die die Konvertierung von Tabellenzeilen in Spalten erfordert. Zum Beispiel:

<table id="original">
  <tr>
    <th></th>
    <th>产品A</th>
    <th>产品B</th>
    <th>产品C</th>
  </tr>
  <tr>
    <td>颜色</td>
    <td>红色</td>
    <td>蓝色</td>
    <td>绿色</td>
  </tr>
  <tr>
    <td>尺寸</td>
    <td>大号</td>
    <td>中号</td>
    <td>小号</td>
  </tr>
  <tr>
    <td>售价</td>
    <td>100</td>
    <td>200</td>
    <td>150</td>
  </tr>
</table>

2. Verwenden Sie den folgenden jQuery-Code, um die Daten der Originaltabelle zu lesen und in einem Array zu speichern:

var rows = $('#original tr');
var data = [];

for (var i = 1; i < rows.length; i++) {
  var row = rows[i];
  var rowData = [];

  for (var j = 1; j < row.cells.length; j++) {
    rowData.push(row.cells[j].innerText);
  }

  data.push(rowData);
}

3. Als nächstes speichern wir die Zeilenköpfe, Spaltenköpfe und Daten in drei verschiedenen Arrays. Mitte:

var rowHeaders = [];
var colHeaders = [];
var values = [];

for (var i = 0; i < data.length; i++) {
  rowHeaders.push(rows[i + 1].cells[0].innerText);
}

for (var i = 1; i < rows.length; i++) {
  var row = rows[i];
  for (var j = 1; j < row.cells.length; j++) {
    if (i === 1) {
      colHeaders.push(row.cells[j].innerText);
    }
    if (!values[j - 1]) {
      values[j - 1] = [];
    }
    values[j - 1].push(row.cells[j].innerText);
  }
}

Zu diesem Zeitpunkt haben wir die Daten erfolgreich in verschiedenen Arrays nach Zeilen, Spalten und Werten gespeichert. Als nächstes müssen wir aus diesen Arrays eine neue Tabellenstruktur erstellen.

4. Erstellen Sie eine neue Tabellenstruktur und fügen Sie sie in das HTML-Dokument ein:

var newTable = $('<table>');
var headerRow = $('<tr>');
headerRow.append($('<th>').text(''));

for (var i = 0; i < colHeaders.length; i++) {
  headerRow.append($('<th>').text(colHeaders[i]));
}

newTable.append(headerRow);

for (var i = 0; i < rowHeaders.length; i++) {
  var row = $('<tr>');
  row.append($('<td>').text(rowHeaders[i]));

  for (var j = 0; j < values.length; j++) {
    row.append($('<td>').text(values[j][i]));
  }

  newTable.append(row);
}

$('#original').after(newTable);

5. Zuletzt müssen wir die ursprüngliche Tabelle entfernen:

$('#original').remove();

An diesem Punkt haben wir den Vorgang der Konvertierung von Tabellenzeilen in Spalten abgeschlossen . Nun wurde die Originaltabelle entfernt und die konvertierte Tabelle in das HTML-Dokument eingefügt.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit jQuery Tabellenzeilen in Spalten konvertieren. Die spezifische Implementierung besteht darin, eine neue Tabellenstruktur zusammenzustellen, indem Tabellendaten gelesen und verarbeitet werden. Durch diesen Vorgang können die Daten in der Tabelle klarer und intuitiver angezeigt und verarbeitet werden. Für Entwickler und Datenanalysten hat dies wichtige Auswirkungen auf die schnelle Verarbeitung von Daten und die Analyse ihrer Bedeutung.

Das obige ist der detaillierte Inhalt vonjquery konvertiert Tabellenzeilen in Spalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!