Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre confirmé
    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

  2. #2
    Rédacteur/Modérateur

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    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
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre confirmé
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    var i=-i;
    c'est correct ça ? sans même une initialisation ?

  4. #4
    Membre expert
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    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 javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    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)';
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  5. #5
    Rédacteur/Modérateur

    Sans utilisation ?
    et ++i ???
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    Membre expert
    initialisation

    en gros, tu initialises i avec i
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  7. #7
    Membre confirmé
    Citation Envoyé par SpaceFrog Voir le message
    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 ?

  8. #8
    Rédacteur/Modérateur

    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    var i=-i;
    console.log(i); // renvoi NaN
    console.log(++i); // renvoi NaN
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  9. #9
    Membre expert
    je pense que SpaceFrog a juste faire une erreur ca arrive meme aux meilleurs
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  10. #10
    Rédacteur/Modérateur

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

    il faut lire
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    var i= -1;


    Avec toutes mes plus plates confuses
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    Rédacteur/Modérateur

    ben oui, c'est çà, quand les supères bons fonts une erreurs , les apprentis ce mettent à douter de leur petit savoir .
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  12. #12
    Rédacteur/Modérateur

    Quand la sénélité guette le maitre, l'élève prends sa place
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  13. #13
    Expert confirmé
    et pourquoi ne pas tout simplement utiliser
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  14. #14
    Modérateur

    Bonjour,
    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    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é

  15. #15
    Membre confirmé
    ajout d'un exemple
    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


    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

  16. #16
    Modérateur

    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    0 - 1 - 2
    V - V - X
    X - X - V
    V - X - X
    X - V - X

    Pour la transposition :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    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.

  17. #17
    Membre confirmé
    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)

  18. #18
    Expert confirmé
    Bonjour,

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


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

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    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 css :Sélectionner tout -Visualiser dans une fenêtre à part
    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 javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    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)
    		})
    	})
    })

  19. #19
    Membre confirmé
    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    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;
    			}
    		}
    	}

###raw>template_hook.ano_emploi###