[DOM] enlever des lignes dynamiquement DOM + PHP
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:
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:
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:
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.
