Discussion :

[yusuf islam]

Bonjour,

J'ai un souci avec l'utilisation des tables Html/Javascript. En fait, j'ai 3 listes liées entre elles , lorsque je fais mon choix je clique sur un button Add pour le valider puis un row s'ajoute dans ma page Web et un champs de text "Prix " s'incrémente avec les valeurs des articles !!maintenant j'ai fais une fonction remove pour supprimer le row , le problème c'est même je donne des Id au l'élément , il y aura un décalage si on supprime plusieurs rows !!

Quelqu'un aurait une piste pour résoudre cette histoire?
voila les fonctions Add et Remove

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
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
function addRow(tableID) {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                var cell1 = row.insertCell(0);
                var element1 = document.createElement("input");
                element1.type = "checkbox";
                cell1.appendChild(element1);
                var cell2 = row.insertCell(1);
                cell2.innerHTML = rowCount + 1;
 
                var cell3 = row.insertCell(2);
                var element2 = document.createElement("input");
                element2.type = "text";
                element2.value=document.getElementById('audit').options[document.getElementById('audit').selectedIndex].text;;
 
                cell3.appendChild(element2);
                var cell4 = row.insertCell(3);
                var element3 = document.createElement("input");
                element3.type = "text";
                element3.value=document.getElementById('finding2').options[document.getElementById('finding2').selectedIndex].text;
 
                cell4.appendChild(element3);
                var cell5 = row.insertCell(4);
                var element4 = document.createElement("input");
                element4.type = "text";
                element4.value=document.getElementById('recommendation').options[document.getElementById('recommendation').selectedIndex].text;
 
                cell5.appendChild(element4);
 
                var cell6 = row.insertCell(5);
                var element5 = document.createElement("input");
                element5.type = "text";
 
                element5.value=document.getElementById("calc_resultat").value*document.getElementById('prix_article').options[document.getElementById('prix_article').selectedIndex].text;
                cell6.appendChild(element5);
 
                Total();
 
 
 
            }
 
            function deleteRow(tableID) {
                try {
                    var table = document.getElementById(tableID);
                    var rowCount = table.rows.length;
 
                    for(var i=0; i<rowCount; i++) {
                        var row = table.rows[i];
                        var chkbox = row.cells[0].childNodes[0];
                        if(null != chkbox && true == chkbox.checked) {
                            table.deleteRow(i);
                            rowCount--;
 
                            i--;
                        }
 
                    }
                }catch(e) {
                    alert(e);
                }
 
 
            }

Merci d'avance !!

[Loceka]

Dans ton code il n'y a aucun ID au contraire

Mais sinon c'est pas compliqué : quand tu supprimes une ligne il te suffit de recalculer tous les ids qui suivent cette ligne.

[sekaijin]

Code :

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

1
2
3
4
5
for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);

cela ne peut pas fonctionner
car si tu enlève un row les indices se décalent automatiquement
il faut utiliser les membres du DOM

Code :

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

1
2
3
4
5
6
7
8
9
var row = document.getElementById(tableID).tbody.firstChild;
while (row) {
  var current = row;
  row = current .nextSibilin;
  var chkbox = current.cells[0].childNodes[0];
   if(null != chkbox && true == chkbox.checked) {
     document.getElementById(tableID).tbody.removeChild(current);
   }
}

A+JYT

[yusuf islam]

il faut utiliser les membres du DOM

Code :

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

1
2
3
4
5
6
7
8
9
var row = document.getElementById(tableID).tbody.firstChild;
while (row) {
  var current = row;
  row = current .nextSibilin;
  var chkbox = current.cells[0].childNodes[0];
   if(null != chkbox && true == chkbox.checked) {
     document.getElementById(tableID).tbody.removeChild(current);
   }
}

oui , c'est ça le problème , sinon je dois ajouter un Id et redéfiner la fonction delete ??!

[yusuf islam]

oui ,j'ai supprimé L'Id ,element5.id=c++ mais je vois pas comment je peux redéfinir les Id