jquery convertit les lignes du tableau en colonnes

Dans le développement front-end, le traitement et l'affichage des données des tableaux sont souvent impliqués. Parfois, nous devons convertir les lignes du tableau en colonnes pour de meilleurs besoins d’affichage ou de traitement des données. jQuery est une bibliothèque JavaScript légère qui fournit des méthodes pratiques de manipulation du DOM et de gestion des événements, rendant cette opération de conversion de données de table simple et facile. Cet article explique comment utiliser jQuery pour convertir les lignes d'un tableau en colonnes.

Pourquoi devons-nous convertir les lignes du tableau en colonnes ?

Dans le développement réel, nous devons parfois afficher et traiter les données du tableau plus en détail. Par exemple, dans un tableau, une ligne représente un produit et chaque colonne représente les attributs du produit. Si nous voulons classer ou comparer tous les produits en fonction de leurs attributs, nous devons convertir les lignes du tableau en colonnes. Le tableau converti peut afficher plus clairement les attributs du produit ou les différences entre les attributs, permettant ainsi aux utilisateurs ou aux développeurs de traiter et d'analyser plus facilement les données.

L'idée de convertir les lignes d'un tableau en colonnes

Pour convertir les lignes d'un tableau en colonnes, nous devons lire les données du tableau via JavaScript/jQuery et les assembler dans un nouveau tableau. Les idées spécifiques de mise en œuvre sont les suivantes :

1. Tout d'abord, nous devons lire toutes les données du tableau et comprendre la structure des données du tableau et la signification de chaque colonne.
2. Traitez les données et extrayez les en-têtes de lignes, les en-têtes de colonnes et les données.
3. Assemblez la nouvelle structure de table et ajoutez-y les données traitées.

Étapes pour implémenter jQuery pour convertir les lignes du tableau en colonnes

Maintenant, implémentons l'opération de conversion des lignes du tableau en colonnes étape par étape.

1. Préparez une structure de tableau qui nécessite la conversion des lignes du tableau en colonnes. Par exemple :

<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. Utilisez le code jQuery suivant pour lire les données de la table d'origine et les stocker dans un tableau :

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. Ensuite, nous stockons les en-têtes de ligne, les en-têtes de colonne et les données dans trois tableaux différents. Centre :

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);
  }
}

À ce stade, nous avons réussi à stocker les données dans différents tableaux par lignes, colonnes et valeurs. Ensuite, nous devons créer une nouvelle structure de table à partir de ces tableaux.

4. Créez une nouvelle structure de tableau et insérez-la dans le document HTML :

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. Enfin, nous devons supprimer le tableau d'origine :

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

À ce stade, nous avons terminé l'opération de conversion des lignes du tableau en colonnes . Désormais, le tableau d'origine a été supprimé et le tableau converti a été inséré dans le document HTML.

Résumé

Cet article explique comment utiliser jQuery pour convertir les lignes d'un tableau en colonnes. L'implémentation spécifique consiste à assembler une nouvelle structure de table en lisant les données de la table et en traitant les données. Grâce à cette opération, les données du tableau peuvent être affichées et traitées de manière plus claire et intuitive. Pour les développeurs et les analystes de données, cela a des implications importantes pour traiter rapidement les données et analyser leur signification.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!