[DOM] enlever des lignes dynamiquement DOM + PHP [Fait]

**beyo** · 10/01/2009, 13h10

J'essaie de créer dynamiquement un tableau contenant des éléments de formulaire. Chaque ligne correspond à une option. J'ajoute en bout de ligne un lien pour effacer celle-ci (la ligne, et donc l'option).

J'ai réussi à trouver ce que je voulais pour ajouter des lignes. Mais je sèche pour oter les ligne. En tout cas, ce que j'ai essayé ne fonctionne pas.

Evidemment l'intérêt est d'utiliser une base de donnée pour stocker les valeurs

Voici mon code :

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
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
94
95
96
97
98
99
100
101
102
103
104
105
<?php
//Le script de connection à la base de données
include_once('../scripts/php/connectDB.php');
 
$envoi = (isset($_POST['envoi'])) ? $_POST['envoi'] : '';
 
//Pour ajouter dans la base
if ($envoi == 'ok')
{
	$sql = "DELETE FROM optiontmp";
	mysql_query($sql);
 
	foreach ($_POST as $key => $val)
	{
		if (strpos($key, 'intOption') !== false)
		{
			$idkey = str_replace('intOption', '', $key);
 
			$sql = "INSERT INTO optiontmp (nom) VALUES ('".$_POST["intOption$idkey"]."')";
			mysql_query($sql);
		}
	}
}
 
$listO = array();
$listO['idO'] = array();
$listO['intituleO'] = array();
 
$nb_opt = 0;
$sql = "SELECT * FROM optiontmp";
$res = mysql_query($sql);
if (mysql_num_rows($res) != 0)
{
	while( $enr = mysql_fetch_assoc($res))
	{
		$listO['idO'][] = $enr['id'];
		$listO['intituleO'][] = $enr['nom'];
		$nb_opt++;
	}
}
mysql_free_result($res);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title></title>
<script type="text/javascript">
<!--
var inc_o=0;
 
function ajouteOption(incval)
{
	if (incval > 0 && inc_o == 0){inc_o = incval;}
 
	var parent = document.getElementById("listeOption");
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	var td2 = document.createElement('td');
 
	parent.appendChild(tr);
	tr.appendChild(td1);
	tr.appendChild(td2);
 
	tr.setAttribute('id', "idO"+inc_o);
 
	td1.innerHTML = "<input type='text' name='intOption"+inc_o+"' size='30' />";
	+"<input type='hidden' name='idOption"+inc_o+"' />";
	td2.innerHTML = "<a href='#option' onclick=\"supprimeOption("+inc_o+");\">-<\/a>";
 
	inc_o++;
}
 
function supprimeOption(incval)
{
	var parent = document.getElementById("listeOption");
	var ligne = document.getElementById("idO"+incval);
	alert(incval);
//	parent.deleteRow(incval); //possibilité 1
//	parent.removeChild(ligne); // possibilité 2...
}
-->
</script>
</head>
<body>
<form action="" method="post">
 
	<a href="#" onclick="ajouteOption(<?php echo $nb_opt; ?>);">Ajouter Option</a>
	<table id="listeOption">
	<tbody>
<?php
for($i=0;$i<$nb_opt;$i++)
{
        echo '<tr id="idO'.$i.'"><td><input type="text" name="intOption'.$i.'" size="30" value="'.$listO['intituleO'][$i].'" /></td>';
        echo '<input type="hidden" name="idOption'.$i.'"  value="'.$listO['idO'][$i].'" /></td>';
        echo '<td><a href="#option" onclick="supprimeOption('.$i.');">-</a></td></tr>';
}
?>
	</tbody>
	</table>
 
	<input type="hidden" name="envoi" value="ok" />
	<input type="submit" value="valider" />
</form>
 
</body>
</html>

Comme vous le constatez pour enlever une ligne j'ai essayé :

Code :

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

parent.deleteRow(incval);

qui ne fonctionne si on enlève le ligne dans l'ordre décroissant : si je crée 3 lignes puis que j'enlève celle du haut (la première), puis que j'essaie une autre ça plante. Il y a de toute évidence un problème d'indice, mais je n'arrive pas à trouver la parade.

J'ai aussi essayé

Code :

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

parent.removeChild(ligne);

Qui fonctionne pour les ligne crées dynamiquement, mais qui ne fonctionne pas s'il y a déjà des lignes présentes (réaffichage des éléments enregistrés dans mon cas)

Si quelqu'un à une idée, j'en serais infiniment reconnaissant.

**Bovino** · 10/01/2009, 14h44

parent est très malvenu comme nom de variable, car c'est un mot clé JavaScript qui désigne la fenêtre ou le cadre parent

**Auteur** · 10/01/2009, 15h07

bonjour,

ici un exemple complet d'ajout et suppression de lignes dans un tableau.

**beyo** · 10/01/2009, 15h19

Certe Bovino, tu as raison (je ne maitrise pas le js). Cepeandant, j'ai trouvé une solution et ce n'était a priori pas ça le problème.
Cependant comme je suis toujours pour les bonnes pratiques (et éviter les résultats erratiques) je change le nom.

J'ai séparé les éléments créés dynamiquement et ceux réaffichés par ph pour éviter les embrouilles d'indice. Et l'astuce qu'il fallait trouver (sur Google évidemment), c'est que dans ce cas de figure pour enlever un élément <tr>, on fait appel au le parent de celui-ci et ce n'est pas <table>, c'est <tbody>, même si on l'omet dans le code.. Donc j'ai mis l'id sur le tbody.

Je vous soumets pour ceux que celà pourra intéresser le code qui maintenant fonctionne :

le js :

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
var inc_o=0;
//Ajoute des lignes pour les tableaux d'options
function ajouteOptionNew(incval)
{
	if (incval > 0 && inc_o == 0){inc_o = incval;}
 
	var leparent = document.getElementById("listeOptionNew");
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	var td2 = document.createElement('td');
	var td3 = document.createElement('td');
	var td4 = document.createElement('td');
 
	leparent.appendChild(tr);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
 
	tr.id = "idON"+inc_o;
	tr.setAttribute('id', "idON"+inc_o);
 
	td1.innerHTML = "<input type='text' name='intOption"+inc_o+"' size='30' />";
	td2.innerHTML = "<input type='text' name='refOption"+inc_o+"' size='30' />";
	td3.innerHTML = "<input type='text' name='prixOption"+inc_o+"' size='30' />"
	+"<input type='hidden' name='idOption"+inc_o+"' />";
	td4.innerHTML = "<a href='#option' onclick=\"supprimeOptionNew("+inc_o+");\">-<\/a>";
 
	inc_o++;
}
function supprimeOptionNew(incval)
{
	var leparent = document.getElementById("listeOptionNew");
	var letr = document.getElementById("idON"+incval);
	leparent.removeChild(letr);
}
 
function supprimeOption(incval)
{
	var leparent = document.getElementById("listeOption");
	var letr = document.getElementById("idO"+incval);
	leparent.removeChild(letr);
}

le html (php ici)

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<?php
//La connection à la base de donnée
include_once('../scripts/php/connectDB.php');
 
$envoi = (isset($_POST['envoi'])) ? $_POST['envoi'] : '';
 
if ($envoi == 'ok')
{
	$sql = "DELETE FROM optiontmp";
	mysql_query($sql);
 
	foreach ($_POST as $key => $val)
	{
		if (strpos($key, 'intOption') !== false)
		{
			$idkey = str_replace('intOption', '', $key);
 
			$sql = "INSERT INTO optiontmp (nom, ref, prix) 
			VALUES ('".$_POST["intOption$idkey"]."', 
			'".$_POST["refOption$idkey"]."', 
			'".$_POST["prixOption$idkey"]."')";
			mysql_query($sql);
		}
	}
}
 
$listO = array();
$listO['idO'] = array();
$listO['intituleO'] = array();
$listO['referenceO'] = array();
$listO['prixO'] = array();
 
$nb_opt = 0;
$sql = "SELECT * FROM optiontmp";
$res = mysql_query($sql);
if (mysql_num_rows($res) != 0)
{
	while( $enr = mysql_fetch_assoc($res))
	{
		$listO['idO'][] = $enr['id'];
		$listO['intituleO'][] = $enr['nom'];
		$listO['referenceO'][] = $enr['ref'];
		$listO['prixO'][] = $enr['prix'];
		$nb_opt++;
	}
}
mysql_free_result($res);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title></title>
<script type="text/javascript" src="../scripts/js/produit.js"></script>
</head>
<body>
<form action="" method="post">
 
	<a href="#" onclick="ajouteOptionNew(<?php echo $nb_opt; ?>);">Ajouter Option</a>
 
	<table><tbody id="listeOption">
<?php
for($i=0;$i<$nb_opt;$i++)
{
        echo '<tr id="idO'.$i.'">
        <td><input type="text" name="intOption'.$i.'" size="30" value="'.$listO['intituleO'][$i].'" /></td>
        <td><input type="text" name="refOption'.$i.'" size="30" value="'.$listO['referenceO'][$i].'" /></td>
        <td><input type="text" name="prixOption'.$i.'" size="30" value="'.$listO['prixO'][$i].'" />
        <input type="hidden" name="idOption'.$i.'"  value="'.$listO['idO'][$i].'" /></td>
        <td><a href="#option" onclick="supprimeOption('.$i.');">-</a></td></tr>
        ';
}
?>
	</tbody>
	</table>
	<table>
 
	<table><tbody id="listeOptionNew"></tbody></table>
 
	<input type="hidden" name="envoi" value="ok" />
	<input type="submit" value="voir" />
</form>
 
</body>
</html>

testé sur FF et IE6 et 7
PS: c'est quand même hardcore le DOM. Je comprends pourquoi je ne me lance pas plus dans le XML

OOpps, pendant que je postais Auteur me donnais une réponse. Merci à toi, je regarde quand même ton lien.

Je viens de lire vite fais. insertCell et deleteRow sont du DOM ? reconnu par IE et FF? Quel est la différence entre

leparent.deleteRow(ligne.rowIndex);

et
leparent.removeChild(ligne) ?

A part que de toute évidence dans ton exemple, deleteRow ne tient pas compte du tbody.
Est-ce juste une différence pourles puristes?

[DOM] enlever des lignes dynamiquement DOM + PHP [Fait]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager