Supprimer toute les cellules d'une table dynamiquement sauf certaines...

Version imprimable

Bonjour tout le monde.

Depuis ce matin, je me heurte à un problème tout bête : supprimer dynamiquement une cellule d'un tableau.
En fait, il faut que je supprime toutes les cases qui ne sont pas utilisées.

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
 
        // La création du tableau : 
        let i = 0; // On utilise pas la ligne 0 car c'est l'entête
        let TabDepend = document.getElementById("table_depend");
        let NbLigTab = TabDepend.getElementsByTagName('tr').length;
        let NomCell = "";
        let Cell_Synth_id = "";
        let NomFic = "";
        let NomCell_Depend = "";
        let NomFic_Depend = "";
        let PosDerSlash = 0;
        let NbCellule = 0;
        let NbCelluleMax = 0;
 
        while (i <= NbLigTab - 1)
        {
            NomCell_Depend = "DL" + twoDigit(i) + "C05";
 
            if (document.getElementById(NomCell_Depend) !== null)
            {
                NomFic_Depend = document.getElementById(NomCell_Depend).textContent;
                PosDerSlash = NomFic_Depend.lastIndexOf("/");
                NomFic = NomFic_Depend.substring(PosDerSlash + 1, NomFic_Depend.length);
                NomCell_Synthese = "Cell_" + twoDigit(i); // Le numéro de cellule de la SYNTHESE commence à 0
                Cell_Synth_id = document.getElementById(NomCell_Synthese);
                Cell_Synth_id.innerHTML = NomFic;
 
                let ListeClass = document.getElementById(NomCell_Depend).classList;
 
console.log("ListeClass="+document.getElementById(NomCell_Depend).classList);                
 
                if (ListeClass.contains("FondVert"))
                {
                    Cell_Synth_id.classList.add("FondVert");
                }
                if (ListeClass.contains("FondRouge"))
                {
                    Cell_Synth_id.classList.add("FondRouge");
                }
            }
            else
            {
                console.log("NULL i="+i)
            }
            NbCellule = NbCellule + 1;
            i = i + 1;
        }
...
...
...
 
 
// Supprimer les cases qui ne sont pas utilisées.
 
console.log("NbCellule="+NbCellule);   // Dernière cellule utilisée.
        NbCelluleMax = G_NB_LIG_MAX_SYNTHESE * G_NB_COL_MAX_SYNTHESE; // 20 x 20
        while (NbCellule <= NbCelluleMax)
        {
            CellASupp = "Cell_" + twoDigit(NbCellule);
console.log("CellASupp="+CellASupp);            
            var ff = document.getElementById(CellASupp);
            ff.deleteCell(-1);
            NbCellule = NbCellule + 1;
        }
    };

Le deleteCell ne fonctionne pas et je ne comprends pas pourquoi.

Merci d'avance pour votre aide.

Je pensais avoir trouvé mon erreur, mais rien à faire, j'ai toujours un message "Uncaught TypeError: LigID.deleteCell is not a function"

La dernière version :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
// Supprimer les cases qui ne sont pas utilisées.
 
console.log("NbCellule="+NbCellule);   
        NbCelluleMax = G_NB_LIG_MAX_SYNTHESE * G_NB_COL_MAX_SYNTHESE;
        while (NbCellule <= NbCelluleMax - 1)
        {
            CellASupp = "Cell_" + twoDigit(NbCellule);
            Cell =document.getElementById(CellASupp);
            CellID = Cell.id;
            CellName = Cell.name;
            LigID = Cell.parentElement.id;
console.log("CellID="+CellID);  
console.log("CellName="+CellName);            
console.log("LigID="+LigID);
            LigID.deleteCell(-1);
            NbCellule = NbCellule + 1;
        }

1 pièce(s) jointe(s)

Bon, j'avance, mais ça ne fonctionne toujours pas.

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
 
// Supprimer les cases qui ne sont pas utilisées.
 
console.log("NbCellule="+NbCellule);   
        NbCelluleMax = G_NB_LIG_MAX_SYNTHESE * G_NB_COL_MAX_SYNTHESE;
console.log("NbCelluleMax="+NbCelluleMax);        
        while (NbCellule <= NbCelluleMax - 1)
        {
            CellASupp = "Cell_" + twoDigit(NbCellule);
console.log("CellASupp="+CellASupp); 
            Cell = document.getElementById(CellASupp);
            CellID = Cell.id;
            CellIndex = Cell.index;
console.log("CellIndex="+CellIndex);          
            CellName = Cell.name;
            LigID = Cell.parentElement.id;
console.log("CellID="+CellID);  
console.log("CellName="+CellName);            
console.log("LigID="+LigID);
            ObjLig = document.getElementById(LigID);
            ObjLig.deleteCell(CellIndex);
            NbCellule = NbCellule + 1;
        }
//

Une petite image de ce que ça donne, avec le "avant" et "après"

Pièce jointe 590041

Yes ! j'ai réussit.

Voici la solution, si jamais ça peut aider...

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
 
// Supprimer les cases qui ne sont pas utilisées.
 
console.log("NbCellule="+NbCellule);   
        NbCelluleMax = (G_NB_LIG_MAX_SYNTHESE * G_NB_COL_MAX_SYNTHESE);
console.log("NbCelluleMax="+NbCelluleMax);        
        while (NbCelluleMax >= NbCellule - 1)
        {
            CellASupp = "Cell_" + twoDigit(NbCelluleMax);
console.log("CellASupp="+CellASupp); 
            Cell = document.getElementById(CellASupp);
            if (Cell !== null)
            {
                CellID = Cell.id;
                CellName = Cell.name;
                LigID = Cell.parentElement.id;
    console.log("CellID="+CellID);  
    console.log("CellName="+CellName);            
    console.log("LigID="+LigID);
                ObjLig = document.getElementById(LigID);
                ObjLig.deleteCell(-1);
            };
            NbCelluleMax = NbCelluleMax - 1;
        }
//

03/02/2021, 18h25
NoSmoking
Bonjour,
je me suis perdu dans ton code mais j'ai relevé dans ta « solution »
Code:

1 2 LigID = Cell.parentElement.id; ObjLig = document.getElementById(LigID);
outre le fait que tu sois toujours fâché avec les déclarations de tes variables, je ne vois pas l’intérêt de récupérer l'id d'un élément pour pouvoir le récupérer via getElementById ???

Tu mets des id de partout ce qui ne te sert à rien et même qui te dessert à preuve le code qui en résulte.
Code:

1 2 3 4 const elemRow = elemCell.parentElement; elemRow.removeChild(elemCell); // ou simplement elemCell.remove();