Discussion :

[clavier12AZQSWX]

bonjour,

j'ai un tableau de 4 colonnes.
je souhaite fusionner les colonnes 2 et 3. Manuellement ça consiste à collecter les noms des colonnes TH et des valeurs TD et faire une concat et supprimer les colonnes collectées.

Peut-être que jquery peut le faire en 3 lignes avec colspan mais je ne trouve pas la syntaxe en stipulant les 2 colonnes.

Le problème, c'est que mes colonnes n'ont pas d'id du coup je coince...
mon tableau est basique, et dans cette forme :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<table id="montableau">
<thead>
	<tr>
<th>col1</th> <th>col2</th><th>col3</th><th>col4</th>
</tr>
</thead>
<tbody>
	<tr>
<td>val1</td> <td>val2</td><td>val3</td><td>val4</td>
</tr>
</tbody>
</table>

y-a-t-il un moyen de le faire en jquery ou javascript pur ?

idéalement je souhaite donc avoir :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<table id="montableau">
<thead>
	<tr>
<th>col1</th> <th>col2 col3</th><th>col4</th>
</tr>
</thead>
<tbody>
	<tr>
<td>val1</td> <td>val2 val3</td><td>val4</td>
</tr>
</tbody>
</table>

j'ai trouvé le code d'une personne qui avait un besoin similaire mais bizarrement ça ne fonctionnement pas sur mon cas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$("#montableau tr td:nth-child(3)").each(function()
{
    var t = $(this);
    var n = t.next();
    t.html(t.html() + n.html());
    n.remove();
});

Merci de votre aide.

ps : compatibilité Chrome et firefox

[Toufik83]

Bonjour,

Essaies :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$("#montableau tr th:nth-child(3),#montableau tr td:nth-child(3)")
.each(function(){
    $(this).prev()
    .html($(this).prev().html()+" "+$(this).html())
   .end().remove();
});

[clavier12AZQSWX]

merci Toufik83, ça fonctionne.

par contre j'ai dû mal à comprendre. on dirait une ligne compressée de plusieurs opérations recursives à la inception!.
pourquoi tout est sur une ligne ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{$(this).prev().html($(this).prev().html()+" "+$(this).html()).end().remove();});

j'ai bien vu que dans le selecteur tu as ajouté le TH (du coup je comprends pourquoi le code trouvé avait un résultat bancal vu que le TH restait !)

[Toufik83]

Bonjour,

Oui, il faut manipuler les th aussi afin de garder la structure du tableau conteneur.

Et pour les opérations successives, ça s'appelle le chainage des méthodes jQuery, c'est plus simple à lire que de mettre chaque instruction dans une ligne.

à lire.