Modification de la structure d'un tableau HTML avec jQuery

J'ai une liste d'éléments (les X dans les exemples suivants) affichés soit dans une ligne ou dans une colonne d'un tableau HTML.Modification de la structure d'un tableau HTML avec jQuery

En HTML point de vue du code, je soit (affichage horizontal):

<table id="myTable"> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    <td>C</td> 
    ... 
    </tr> 
</table>

ou (affichage vertical):

<table id="myTable"> 
    <tr> 
    <td>A</td> 
    </tr> 
    <tr> 
    <td>B</td> 
    </tr> 
    <tr> 
    <td>C</td> 
    </tr> 
    ... 
</table>

Ce code HTML est généré par un composant JSF (appelé <h:selectManyCheckboxes/>), et donc, je n'ai aucun contrôle sur ce code HTML.

Cependant, je veux afficher ma liste d'éléments dans 2 colonnes. En d'autres termes, le code HTML de ma table sera quelque chose comme ça:

<table id="myTable"> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    </tr> 
    <tr> 
    <td>C</td> 
    <td>D</td> 
    </tr> 
    ... 
</table>

Comment puis-je faire en utilisant jQuery?

Merci d'avance pour votre aide.

ps: Si vous avez besoin de savoir, X sont en fait une entrée et une étiquette, à savoir:

<td><input .../><label .../></td>

Source

2008-11-04 romaintaz

Compte tenu des informations supplémentaires que vous avez fournies, je pense que c'est ce que vous voulez. Il traverse la table en déplaçant les cellules de chaque seconde ligne dans la ligne précédente ...

var idx = 1; 
var row, next; 
while((row = $('#myTable tr:nth-child(' + idx++ + ')')).length) { 
    if((next = $('#myTable tr:nth-child(' + idx + ')')).length) { 
     row.append(next.find('td')); 
     next.remove(); 
    } 
}

Source

2008-11-04 17:34:40 Prestaul

Sélecteur de puissance, activer! – Will

on peut aussi ': eq' au lieu de ': nth-child'. ' pour': eq ', argument est un index basé sur zéro. 'Nth-child', , argument est un index basé sur un seul. En tant que programmeur, j'aime ': eq' puisque son zéro est basé comme la plupart des langages de programmation et propre. – Palani

@Prestaul comment puis-je l'utiliser pour créer 3 colonnes au lieu de deux?tnx – Spring

En supposant que vous commencez avec une cellule de chaque rangée et que chaque cellule a une étiquette et une entrée alors je pense que vous voulez quelque chose comme ceci:

$('#myTable tr').each(function() { 
    $('<td/>').append( 
     $(this).find('td input') 
    ).appendTo(this); 
    });

Source

2008-11-04 14:37:19 Prestaul

J'ai fait quelques éclaircissements sur ce que je veux exactement ... Votre exemple séparer l'entrée de l'étiquette. En fait je ne veux pas diviser des éléments d'une cellule, mais regroupe 2 cellules dans la même rangée ... – romaintaz

Exercice intéressant. Cela fait ce que vous demandez, mais ce n'est peut-être pas exactement ce que vous voulez. Mais cela vous dit comment cela peut être fait. Vous pouvez

l'ajuster à l'endroit où cela fonctionne comme vous l'attendez.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Example of restructuring tables</title> 
    <script src="Scripts/jquery-1.2.6.commented.js"></script> 
</head> 
<!--<body><table id="Table1"> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
</table>--> 
<table id="myTable"> 
    <tr> 
    <td>1</td> 
    </tr> 
    <tr> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    </tr> 
    <tr> 
    <td>4</td> 
    </tr> 
</table> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     debugger; 
     var tds = $("#myTable tr td"); // gets all td elements in the table with id myTable 
     var col1 = $("<tr></tr>"); // holds our first row's columns 
     var col2 = $("<tr></tr>"); // holds our second row's columns 
     var halfway = Math.ceil(tds.length/2); 
     // add the first half of our td's to the first row, the second half to the second 
     for (var i = 0; i < tds.length; i++) { 
      if (i < halfway) 
       col1.append(tds[i]); 
      else 
       col2.append(tds[i]); 
     } 
     // clear out the clutter from the table 
     $("#myTable").children().remove(); 
     // add our two rows 
     $("#myTable").append(col1); 
     $("#myTable").append(col2); 
    }); 
</script> 
</body> 
</html>

Voir, votre exemple de la façon dont vous vouliez pour finir tout mettre en deux rangées, mais votre question dit « deux colonnes ». J'ai fait deux rangées juste parce que c'était plus facile. Vous avez juste besoin de modifier la boucle for pour que ce soit le long de cette ligne

Source

2008-11-04 15:11:53 Will

Votre code modifie en effet la table et sépare tous les éléments en deux rangées ... Pas exactement ce que je voulais faire , mais ce code peut être modifié pour avoir deux colonnes au lieu de deux lignes ... – romaintaz

Merci! Peut-être pas été la réponse acceptée ici, mais bien sûr était utile pour moi .. – Tim

Modification de la structure d'un tableau HTML avec jQuery

Répondre

Questions connexes