Supprimer une ligne selectionnée dans un tableau

Version imprimable

Bonsoir chers tous, En effet j'aimerais supprimer une ligne sélectionnée par ma fonction supprimerligne. Il faut dire que les lignes du tableau sont générés automatiquement et dans une colonne on met dynamiquement à travers le code javascript un bouton par ligne de suppression. Apparemment mon paramètre(this.parentNode.rowIndex) que je passe n'est pas exacte.Veuillez bien m'aider.Merci d'avance.

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php 
include ("haut.php");
 
if (isset($_POST['btndemande'])) { 
        echo "aaaa";
        include("insertiondemande.php");
 
        }
?>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="liste.js"></script>
		<div class="col-sm-8 text-left"> 
<script language="JavaScript">
function ajouterLigne()
{ 
	var tableau = document.getElementById("contenub");
 
	var ligne = tableau.insertRow(-1);//on a ajouté une ligne
 
	var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
	colonne1.innerHTML += document.getElementById("localite_deux").value;//on y met le contenu de titre
var select = document.getElementById("localite_deux" );
 
var valeur = select.options[select.selectedIndex].text;
	var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
	colonne2.innerHTML +=valeur; 
 
 
 
	var colonne3 = ligne.insertCell(2);//on ajoute la troisieme cellule
	colonne3.innerHTML +=document.getElementById("quantite").value;
	var rowNumber = document.getElementById("tableau").rows.length
	var colonne4= ligne.insertCell(3);//on ajoute la quartrieme cellule
	colonne4.innerHTML +=rowNumber-1;
 
var colonne5= ligne.insertCell(4);//on ajoute la quartrieme cellule
	colonne5.innerHTML +='<input type="button" onclick="supprimerLigne(this.parentNode.rowIndex);" value="supprimer"/>'
 
}
 
function supprimerLigne(num)
{var num1=num+1;
	document.getElementById("contenub").deleteRow(num);
}
      </script>
 <select id="localite_un">
        	<option value="">Choisir la famille</select>
        </select>
        <select id="localite_deux">
        	<option value="">Choisir l'article</select>
        </select>
 
               <label for="textdirection"> Quantité:</label>
			   <input type="numerique" name="Quantité" id="quantite">
 
			   <br><input type="submit" name ="btndemande" value= "créer une demande" class="btn btn-primary" >
			    <button type="reset" name="annuler" value="annuler" class="btn btn-primary">Annuler</button>
 
				<input type="button" onclick="ajouterLigne();" value="Enregistrer"/>
 
<div dir="rtl" style="height:100px;overflow-y:scroll;">
 
<table id="tableau" border="1"  style="width:100%" dir="ltr">
	<thead>
		<tr>
			<th>Article</th>
			<th>libelle</th>
			<th>Quantite</th>
			<th>numero de ligne</th>
			<th>supprimer</th>
 
			</tr>
	</thead>
	<tbody id="contenub">
 
	</tbody>
</table>
</div>
</form>
 
 
 
 
 
    </div>
 
 
 
<?php 
include ("bas.php")
?>

09/05/2018, 21h48
pterrat
De mémoire, il me semble que deleteRow doit être executer sur la balise table et pas tbody.
Dans ton exemple ça donnerait quelque chose du genre :
Code:

1 2 3 4 function supprimerLigne(num) {var num1=num+1; document.getElementById("tableau").deleteRow(num); }
en espérant t'avoir aidé.

:salut:

Codes corrigés :

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
function ajouterLigne() {
    var tableau = document.getElementById("contenub");
 
    var ligne = tableau.insertRow(-1); //on a ajouté une ligne
 
    var colonne1 = ligne.insertCell(0); //on a une ajouté une cellule
 
    colonne1.innerHTML += document.getElementById("localite_deux").value; //on y met le contenu de titre
 
    var select = document.getElementById("localite_deux");
 
    var valeur = select.options[select.selectedIndex].text;
    var colonne2 = ligne.insertCell(1); //on ajoute la seconde cellule
 
    colonne2.innerHTML += valeur;
 
    var colonne3 = ligne.insertCell(2); //on ajoute la troisieme cellule
 
    colonne3.innerHTML += document.getElementById("quantite").value;
 
    var rowNumber = document.getElementById("tableau").rows.length
    var colonne4 = ligne.insertCell(3); //on ajoute la quartrieme cellule
 
    colonne4.innerHTML += rowNumber - 1;
 
    var colonne5 = ligne.insertCell(4); //on ajoute la quartrieme cellule
 
    colonne5.innerHTML +=
        '<input type="button" onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);" value="supprimer"/>' // this.parentNode c'est td
}
 
function supprimerLigne(num) {
 
    //console.log( num );
 
    //var num1 = num + 1;
 
    document.getElementById("contenub").deleteRow(num);
}

En effet j'ai essayé les deux propositions.La première (application de deleterow sur la table) supprime l'entête du tableau. Pour la seconde(this.parentNode.parentNode) rien ne se passe. voila la solution (encadrer le bouton supprimer par un td :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
 
<?php 
include ("haut.php");
 
if (isset($_POST['btndemande'])) { 
        echo "aaaa";
        include("insertiondemande.php");
 
        }
?>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="liste.js"></script>
		<div class="col-sm-8 text-left"> 
<script language="JavaScript">
function ajouterLigne()
{ 
	var tableau = document.getElementById("tableau");
 
	var ligne = tableau.insertRow(-1);//on a ajouté une ligne
 
	var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
	colonne1.innerHTML += document.getElementById("localite_deux").value;//on y met le contenu de titre
var select = document.getElementById("localite_deux" );
 
var valeur = select.options[select.selectedIndex].text;
	var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
	colonne2.innerHTML +=valeur; 
 
 
 
	var colonne3 = ligne.insertCell(2);//on ajoute la troisieme cellule
	colonne3.innerHTML +=document.getElementById("quantite").value;
	var rowNumber = document.getElementById("tableau").rows.length
	var colonne4= ligne.insertCell(3);//on ajoute la quartrieme cellule
	colonne4.innerHTML +=rowNumber-1;
var numo=rowNumber-1;
var colonne5= ligne.insertCell(4);//on ajoute la quartrieme cellule
	colonne5.innerHTML +='<td><input type="button" onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);" value="supprimer"/></td>'
 
}
 
function supprimerLigne(num)
{var num1=num+1;
	document.getElementById("tableau").deleteRow(num);
}
      </script>
 <select id="localite_un">
        	<option value="">Choisir la famille</select>
        </select>
        <select id="localite_deux">
        	<option value="">Choisir l'article</select>
        </select>
 
               <label for="textdirection"> Quantité:</label>
			   <input type="numerique" name="Quantité" id="quantite">
 
			   <br><input type="submit" name ="btndemande" value= "créer une demande" class="btn btn-primary" >
			    <button type="reset" name="annuler" value="annuler" class="btn btn-primary">Annuler</button>
 
				<input type="button" onclick="ajouterLigne();" value="Enregistrer"/>
 
<div dir="rtl" style="height:100px;overflow-y:scroll;">
 
<table id="tableau" border="1"  style="width:100%" dir="ltr">
	<thead>
		<tr>
			<th>Article</th>
			<th>libelle</th>
			<th>Quantite</th>
			<th>numero de ligne</th>
			<th>supprimer</th>
 
			</tr>
	</thead>
	<tbody id="contenub">
 
	</tbody>
</table>
</div>
</form>
 
 
 
 
 
    </div>
 
 
 
<?php 
include ("bas.php")
?>