Manipuler un tableau sans connaître le nombre de lignes

bonjour,

je voudrais manipuler un tableau dont je connais QUE l'ID et le nombre de colonnes mais pas le nombre de ligne.

est-ce que c'est possible de le faire en javascript/DOM ? est-ce plus simple (moins gourmant en ressource) en javascript pur ou plutôt qu'en jquery ? sachant que le code servira qu'à une seule page.

En fait sur un tableau, j'ai besoin d'appliquer un traitement qui s'apparente à l'inverse de tetris : au lieu de pousser les contenus vers le bas, je dois les remonter vers le haut.
En une phrase : pour chaque cellule, je regarde si la cellule du dessus est vide, si oui, alors je monte le contenu dedans.
(ça sous-entend donc que mon algo par de la ligne du bas et remonte).

Avant de commencer une moulinette, je me dis que peut-être il existe déjà une librairie JS qui permet de "trier" un tableau comme ça ?

merci de votre aide

Code:

---

1 2 3 4 5 6

$lignes=document.getElementById('trumachinbidule').getElementsByTagName('tr') //ou document.querySelector("#id tr"); var i=-i; while ($lignes[++i]) { //la ligne existe }

---

Code:

---

var i=-i;

---

c'est correct ça ? sans même une initialisation ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<table id="tableTest"> <tr> <td>l1c1</td> <td>l1c2</td> </tr> <tr> <td>l2c1</td> <td>l2c2</td> </tr> <tr> <td>l3c1</td> <td>l3c2</td> </tr> </table>

---

Code:

---

1 2 3 4 5 6

const allLines = document.querySelectorAll('#tableTest tr'); document.querySelectorAll('#tableTest tr:not(:first-of-type)').forEach((ligne, i) => { ligne.style.backgroundColor = 'rgba(0,255,0,.2)'; const previous = allLines[i]; previous.style.backgroundColor = 'rgba(255,0,0,.2)'; });

---

Sans utilisation ?
et ++i ???

initialisation

en gros, tu initialises i avec i :aie:

Citation:

---

Envoyé par SpaceFrog

Sans utilisation ?
et ++i ???

---

le var est à la ligne3 et le i++ à la ligne4

var i=-i ne produit donc aucune erreur si i est null ? c'est parce qu'il y a "var" en déclaratoin avec ?

Salut

Moi aussi je suis troublé par cette syntaxe, et comme j'utilise DVP pour apprendre, je me permet de poster dans cette discussion.

Code:

---

1 2 3

var i=-i; console.log(i); // renvoi NaN console.log(++i); // renvoi NaN

---

je pense que SpaceFrog a juste faire une erreur :aie: ca arrive meme aux meilleurs

Mea Culpa !
Non seulement je mouffle à fond mais je bigle à mort :oops::oops::oops::oops:
Il faut absolument que je me trouve des doigts neuf et surtout un rendez vous chez un bon ophtalmo :(8O8O

il faut lire

Code:

---

var i= -1;

---

Avec toutes mes plus plates confuses :aie:

ben oui, c'est çà, quand les supères bons fonts une erreurs :ptdr:, les apprentis ce mettent à douter de leur petit savoir :calim2:.

Quand la sénélité guette le maitre, l'élève prends sa place :calim2:

et pourquoi ne pas tout simplement utiliser

Code:

---

document.getElementById('maTable').rows.length

---

https://developer.mozilla.org/en-US/...leElement/rows

Bonjour,

Citation:

---

En une phrase : pour chaque cellule, je regarde si la cellule du dessus est vide, si oui, alors je monte le contenu dedans. (ça sous-entend donc que mon algo par de la ligne du bas et remonte).

---

cela risque de ne pas être suffisant si il a deux cellules vides l'une sous l'autre dans la même colonne.

Même si j'ai du mal à comprendre que l'on « défragmente » par colonne les données d'une table qui sont normalement intimement liées à une ligne/colonne.

Néanmoins, pour le principe, il faut réaliser une transposition des cellules de ta table.

Donc en partant de

Code:

---

1 2 3 4

LIG1 = [C1L1, C2L1, C3L1, ...]; LIG2 = [C1L2, C2L2, C3L2, ...]; LIG3 = [C1L3, C2L3, C3L3, ...]; ...

---

et en utilisant les collections rows liées au table, afin d'obtenir

Code:

---

1 2 3 4

COL1 = [C1L1, C1L2, C1L3, ...]; COL2 = [C2L1, C2L2, C2L3, ...]; COL3 = [C3L1, C1L2, C1L3, ...]; ...

---

ensuite boucher les trous ne sera pas bien compliqué

Citation:

---

cela risque de ne pas être suffisant si il a deux cellules vides l'une sous l'autre dans la même colonne.

---

non je commence par la derniere ligne et fait le traitement de gauche à droite

si j'ai (V pour vide, X pour qqchose) :

VVVVV
VVVVV
VVVVV
VVXVV

ça va devenir:

VVXVV
VVVVV
VVVVV
VVVVV

Citation:

---

Même si j'ai du mal à comprendre que l'on « défragmente » par colonne les données d'une table qui sont normalement intimement liées à une ligne/colonne.

---

faut le voir comme une matrice en fait (mon exemple de tetris inversé était pourtant parlant!). je me demande d'ailleur s'il n'existe pas une fonction existante permettant de recollaliser un tableau (de TR et TD) en le traitant comme une matrice mathématique

Je me suis mal exprimé, l'« une sous l'autre », je pensais à plusieurs cellules vides dans la même colonne, au final le traitement reste le même.

Code:

---

1 2 3 4 5

0 - 1 - 2 V - V - X X - X - V V - X - X X - V - X

---

Pour la transposition :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

const lignes = table.rows; const nbLigs = lignes.length; // transpose la table const offsetTable = 0; const tabCellules = []; let nbCols = lignes[offsetTable].cells.length; for (let col = 0; col < nbCols; col += 1) { tabCellules[col] = []; for (let lig = offsetTable; lig < nbLigs; lig += 1) { tabCellules[col].push(lignes[lig].cells[col]); } }

---

et pour la « défragmentation » :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// « défragmentation » des colonnes nbCols = tabCellules.length; for (let col = 0; col < nbCols; col += 1) { // récup. les cellules non vides const tabNoEmpty = tabCellules[col].filter((cell) => cell && cell.textContent !== ""); // si il existe donc des vides if (tabNoEmpty.length < tabCellules[col].length) { // décalage vers le haut des textContent tabCellules[col].forEach((cell, ind) => { if (cell) { const newText = tabNoEmpty[ind] ? tabNoEmpty[ind].textContent : ""; cell.textContent = newText; } }); } }

---

... avec utilisation de la méthode filter() pour la récupération des cellules non vides, ou l'inverse d'ailleurs, et réaffectation des textContent si besoin.

Exemple complet en ligne : Défragmentation verticale d'une table.

super cet exemple.

Pour ma culture personnelle, cela s'appelle-t-il vraiment "defragmentation" ? car on ne doit surtout pas changer de ligne les cellules, juste les remonter (contrairement à la deframation PC disque dur où chaque cellule est fictivement représentée en tableau alors qu'elles sont enchainées)

Bonjour,

Petite alternative, que je devais proposer en tant que défenseur des tableaux ul > li :


http://javatwist.imingo.net/compact.htm

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title></title>   </head>   <body> <div id="corps"> <ul> <li>Colonne 1</li> <li>0</li> <li></li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ul> <li>Colonne 2</li> <li></li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li></li> </ul> <ul> <li>Colonne 3</li> <li>0</li> <li>1</li> <li></li> <li></li> <li>4</li> <li>5</li> <li></li> <li></li> <li>8</li> </ul> <ul> <li>Colonne 4</li> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li></li> <li>8</li> </ul> <ul> <li>Colonne 5</li> <li>0</li> <li>1</li> <li>2</li> <li></li> <li></li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> <button id="go">compacter</button>   </body> </html>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

ul { padding:0px; width:10%; list-style-type:none; }   #corps { display:flex; }   li { height:20px; text-align:center; border:1px solid; }   ul li:first-child { background-color:lime; }

---

Code:

---

1 2 3 4 5 6 7 8

document.querySelector("#go").addEventListener("click",()=>{ const t=document.querySelectorAll("ul"); t.forEach(v=>{ v.querySelectorAll("li").forEach(v2=>{ if(!v2.textContent) v.appendChild(v2) }) }) })

---

Bonjour,
Original javatwister, et avec un code bien concis. :)

Pas mal aussi la gestion CSS des couleurs des cases, NoSmoking !

J'ai réfléchi à une variante de la fonction "defragTable" de NoSmoking en ayant ces objectifs :
- Traitement direct (devrait être rapide).
- Boucles traditionnelles (simple à comprendre pour un débutant).

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

const ar_ligns=table.rows; //lignes const nb_nombLign=ar_ligns.length; //nombre lignes const nb_nombColo=ar_ligns[0].cells.length; //nombre colonnes for(let i=0;i<nb_nombColo;i++) { for(let j=0;j<nb_nombLign;j++) { if(ar_ligns[j].cells[i].textContent==="") { for(let k=j+1;k<nb_nombLign;k++) { const ob_=ar_ligns[k].cells[i]; if(ob_.textContent!=="") { ar_ligns[j].cells[i].textContent=ob_.textContent; ob_.textContent=""; j++; } } break; } } }

---

Citation:

---

Original javatwister, et avec un code bien concis.

---

sauf qu'en épreuve d'examen, ça vaut une note de 0/20 (hors sujet) car il n'a pas tenu compte de ma demande : manipuler un tableau (table tr td...) et non pas une suite de Li Ul Div.....etc.
:aie:

Bonsoir,

Citation:

---

Envoyé par clavier12AZQSWX

sauf qu'en épreuve d'examen, ça vaut une note de 0/20 (hors sujet) ...

---

Le sujet peut concerner d'autres personnes qui pourraient être intéressées par des alternatives.
De plus, il n'est pas rare qu'une personne arrive sur le forum avec une idée et en reparte avec une autre à laquelle elle n'avait pas pensé et qui finalement lui convient mieux.

Après, si c'est pour un exercice avec des consignes strictes, cela peut être signalé et on en tient compte.
Malgré cela, des participations qui s'en éloignent (des consignes) sont à mon sens bienvenues car elles peuvent être enrichissantes.

Enfin, à un entretien ou à un examen, il peut être aussi pertinent d'apporter ou de signaler, en plus de la solution attendue, une alternative digne d'intérêt. :)

Citation:

---

Envoyé par Loralina

Enfin, à un entretien ou à un examen, il peut être aussi pertinent d'apporter ou de signaler, en plus de la solution attendue, une alternative digne d'intérêt. :)

---

[humour]Vous avez voulu une épilation totale, j'ai donc épilé les sourcils, les cils et vous ai rasé le crâne. [/humour]:ptdr:

j'admire votre gentilesse sauf que si on part de ce principe, alors le code du dessus est extrême car ça ramène à juste remplacer les cellules vides par 'rien' plutôt que de s'embetter à considérer des colonnes et des lignes (une matrice) et analyser les contenus, les noeuds child..etc.
donc en gros, le code qui précéde aurait pu être extrement simplifié à un code similaire à :
chercher ("<li></li>") et remplacer par "" dans le noeud html de l'D !
plus besoin de boucle, une seule instruction suffirait !

sans avoir tester :

Code:

---

document.getElementById("montableau").innerHTML=str.replace("<li></li>", "");

---

hélas dans mon cas (une matrice symbolisé par un tableau HTML), je peux appliquer cette méthode :

Code:

---

document.getElementById("montableau").innerHTML=str.replace("<td></td>", "");

---

car je vais perdre la relation des colonnes (décallage des cellules).

Je n'ai pas la main sur le code qui transforme les données matricielles en tableau, si c'était le cas, bien évidement j'aurai préféré un rendu html en DIV ou UL/LI...
merci à tous.

Citation:

---

Envoyé par clavier12AZQSWX

ça ramène à juste remplacer les cellules vides par 'rien'

---

Cette remarque n'a 'rien' à voir avec le code que j'ai proposé (vraiment rien) :roll:

Citation:

---

Envoyé par clavier12AZQSWX

plutôt que de s'embetter à considérer des colonnes et des lignes (une matrice) et analyser les contenus, les noeuds child..etc.

---

Tu noies le poisson en multipliant les grands mots...
C'est dommage car ta demande initiale avait le mérité d'être claire et simple:

Citation:

---

Envoyé par clavier12AZQSWX

sur un tableau, j'ai besoin d'appliquer un traitement qui s'apparente à l'inverse de tetris : au lieu de pousser les contenus vers le bas, je dois les remonter vers le haut.

---

Bonjour,

Citation:

---

Envoyé par clavier12AZQSWX

[humour]Vous avez voulu une épilation totale, j'ai donc épilé les sourcils, les cils et vous ai rasé le crâne. [/humour]:ptdr:

---

Pour prendre un exemple concret :
Sujet d'exercice/examen/entretien :
Mélanger aléatoirement un tableau en utilisant la fonction sort.

En plus de fournir le code demandé, il serait bien d'indiquer qu'il existe une meilleure méthode, performante et garantissant l'équiprobabilité, basée sur les permutations aléatoires.

Citation:

---

Envoyé par clavier12AZQSWX

j'admire votre gentilesse

---

Je garde généralement pour moi mes idées de répliques cinglantes. :)
Le problème de la provocation, c'est que cela donne envie de s'opposer à son interlocuteur et que le fond passe un peu derrière la forme.
C'est moyennement efficace pour amener les gens à réviser leur position, voire déceler les failles de sa propre analyse.

Citation:

---

Envoyé par clavier12AZQSWX

sauf que si on part de ce principe, alors le code du dessus est extrême car ça ramène à juste remplacer les cellules vides par 'rien' plutôt que de s'embetter à considérer des colonnes et des lignes (une matrice) et analyser les contenus, les noeuds child..etc.

---

Je ne comprends pas trop votre analyse du code de javatwister.

Son code parcourt les colonnes de haut en bas.
Quand il tombe sur une cellule au contenu vide, il déplace la cellule en la mettant tout en bas de la colonne.
Les cellules qui étaient en-dessous sont automatiquement remontées d'une case.

Comme quoi, dans le cas où vous n'aviez pas compris cela (ou alors c'est moi qui n'ai pas compris votre interprétation), l'aspect enrichissant (dont je parlais) de ce code peut vous concerner. ;)

Un point positif à son code est que les propriétés des cases sont toutes conservées. Par exemple si une case rouge avec un texte dedans est remontée, la couleur suivra.
Par contre, il faut savoir qu'un déplacement de nœud s'accompagne d'un remaniement en interne avec un certain coût (qui peut être assez négligeable toutefois).
D'où encore une fois l'intérêt d'étudier les différentes approches qui ont été proposées.

ce que m'a appris la solution de javatwister (même si elle est moins applicable sur mon terrain), c'est qu'avant je cherchais à intervertir les données (les vides par les remplies) et qu'il y a aussi une autre possiblilié : jouer sur la visibilité des éléments vides (par changement de Class) mais cela implique que les div soit affichées en piles (l'une en dessous l'autre) ce qui est le cas des éléments de type énumérator (ul li..)

Après, je veux bien suivre la piste de NoSmoking et Loralina mais je trouve ça plus bavard et on recrée des contenus plutôt que de réorganiser les éléments:
http://javatwist.imingo.net/compact2.htm

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title></title> <style> th,td{border:1px solid;width:10%;text-align:center} th{background:lime} </style> </head>   <body> <table> <thead> <tr><th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th><th>Colonne 4</th><th>Colonne 5</th></tr> </thead> <tbody id="tb"> <tr><td>C1 - L1</td><td></td><td>C3 - L1</td><td>C4 - L1</td><td>C5 - L1</td></tr> <tr><td>C1 - L2</td><td></td><td>C3 - L2</td><td>C4 - L2</td><td>C5 - L2</td></tr> <tr><td>C1 - L3</td><td>C2 - L3</td><td>C3 - L3</td><td>C4 - L3</td><td>C5 - L3</td></tr> <tr><td></td><td>C2 - L4</td><td></td><td>C4 - L4</td><td>C5 - L4</td></tr> <tr><td></td><td>C2 - L5</td><td>C3 - L5</td><td>C4 - L5</td><td>C5 - L5</td></tr> <tr><td>C1 - L6</td><td></td><td>C3 - L6</td><td>C4 - L6</td><td>C5 - L6</td></tr> <tr><td>C1 - L7</td><td>C2 - L7</td><td>C3 - L7</td><td>C4 - L7</td><td>C5 - L7</td></tr> <tr><td>C1 - L8</td><td>C2 - L8</td><td>C3 - L8</td><td>C4 - L8</td><td>C5 - L8</td></tr> </tbody> </table> <button id="go">compacter</button>   <script> document.querySelector("#go").addEventListener("click",()=>{         const tb=document.querySelectorAll("#tb>tr>td");         const tr=document.querySelector("#tb>tr").cells.length;         const tab=[];         tb.forEach((v,i)=>{                 if(!tab[i%tr]){                         tab[i%tr]=[]                 };                 if(v.textContent){                         tab[i%tr].push(v.textContent)                 };                 v.textContent="";         })         tab.forEach((v,i)=>{                 v.forEach((w,j)=>{                         tb[j*tr+i].textContent=w;                 })         }) }) </script>   </body>   </html>

---

Ayant eu un peu de temps, j’ai repris le fil de la discussion que j’avais laissé en suspend !

Citation:

---

Envoyé par clavier12AZQSWX

sauf qu'en épreuve d'examen, ...

---

je crois que Loralina à tout dit et qu’effectivement les forums sont des lieux de partage et d’échange qui permettent à chacun d’apprendre et progresser.

Le code de javatwister est riche d’enseignements à savoir que parfois le simple fait de changer de structure HTML, donc d’approche, permet d’accroitre les performances, même si ce n’est pas toujours le premier objectif, tout en appliquant un code plus concis.

Il montre également que la manipulation du DOM, redoutée par tant de personnes, peut être parfaitement triviale.

Citation:

---

Envoyé par Loralina

- Traitement direct (devrait être rapide).

---

Dans l’absolu cela devrait effectivement être vrai mais ...

Citation:

---

Envoyé par Loralina

- Boucles traditionnelles (simple à comprendre pour un débutant).

---

J’ai tendance à diviser pour mieux régner même si cela peut apparaître plus lourd dans certains cas.

Citation:

---

Envoyé par javatwister

Après, je veux bien suivre la piste de NoSmoking et Loralina mais...

---

Ta façon d’aborder le problème a été ma première idée mais je n’aime pas me faire de nœuds au cerveau, même des petits pour un p'ti cerveau :mouarf:.

Tout ceci étant j’ai voulu comparer les différentes méthodes sur base d’une <table> de 10000 lignes, donc pas vraiment réaliste, et j’ai donc commis ce fichier pour test.
Pour info :

• on peut sélectionner le nombre de « trous » par tranche ;
• les temps s'affichent sur la page ;
• pour le reste je vous fais confiance.

Il est difficile de vraiment tirer des enseignements car chaque méthode tire son épingle du jeu suivant le nombre de cases à déplacer.

J’ai noté quand même que FireFox s’en sortait globalement mieux que Chrome et qu’effectivement la méthode Loralina s’en sort mieux sur les extrêmes.

Bonjour,
Bon ben PAS merci pour le test, vu que mon code est largement à la traîne ! :cry:
A croire qu'il a été imprégné d'ondes négatives pour le faire tourner au ralenti ! :evil:
Heureusement, il existe un contresort :
debug.log(`${action} : ${Math.floor((end-deb)*(1-0.9*(action==='loralinaDefragTable')))} ms`);


Une chose qui me pénalise, je pense, c'est le ciblage des cellules : ar_ligns[j].cells[i].
javatwister profite d'un traitement natif ultra rapide pour document.querySelectorAll("tbody td").
Si j'essaie de faire la même chose avec deux boucles, ça prend facilement quatre fois plus de temps.

Du coup, j'ai exploité cet avantage et ajouté quelques optimisations supplémentaires :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

const ar_cells=document.querySelectorAll("tbody td"); //cellules const ar_ligns=table.rows; //lignes const nb_nombLign=ar_ligns.length-1; //nombre lignes const nb_nombColo=ar_ligns[0].cells.length; //nombre colonnes for(let i=nb_nombColo-1;i>=0;i--) { for(let j=0;j<nb_nombLign;j++) { if(ar_cells[j*nb_nombColo+i].textContent==="") { let l=-1; for(let k=j+1;k<nb_nombLign;k++) { const ob_=ar_cells[k*nb_nombColo+i]; const st_=ob_.textContent; if(st_!=="") { ar_cells[j*nb_nombColo+i].textContent=st_; j++; l=k; } } for(let k=j;k<=l;k++) { ar_cells[k*nb_nombColo+i].textContent=""; } break; } } }

---

Avec ce nouveau code :
Sur Firefox, on a tous les trois des performances très proches, indépendamment du nombre cases vides (enfin, je n'ai pas testé à fond non plus).
Sur Chrome, les codes de NoSmoking et moi sont très proches, par contre, moins il y a de cases vides, plus le code de javatwister est long (reste à identifier quel aspect du code déplaît à Chrome).

Et tu pourrais tester le code "listes" NoSmoking? ;)
Parce que je ne me reconnais pas du tout dans celui que tu m'as attribué :mrgreen:

@Loralina :
Là il n' y a pas photo l'optimisation est top, je n'ai pas regardé le code dans le détail mais je l'ai intégré dans le fichier de test en ligne.

@javatwister :
Il s'agit du code que tu as mis au post #26.

Concernant ton code sur base de « listes » si je le fais cela ne sera pas avant septembre.

Concernant Chrome j'ai l'impression que sa gestion I/O à l'arbre Dom est moins efficace que celle de FireFox !?!