Bouton image qui appelle une fonction js

Bonjour,

j'ai un formulaire dynamique créé par une fonction js dans lequel je souhaite intégrer une possibilité de supprimer des entrées existantes. Cela fonctionne avec les lignes existantes, en positionnant un bouton "image" appelant la fonction de suppression.
Dans les lignes ajoutées au travers d'un script js, je souhaite rajouter le même bouton de suppression, et je dois construire ce bouton au travers d'un document.createElement(). J'ai essayé sans succès :
- avec un "button" simple (tout gris tout moche), c'est le formulaire entier qui est validé !
- avec une "img", rien ne se passe, pourtant, lorsque je fais la même chose en "dur" pour les lignes existantes au départ, cela fonctionne...
Je ne sais pas comment régler mon problème.

Voici la fonction de suppression qui fonctionne
function suppr_ligne(index) { document.getElementById(index).parentNode.removeChild(document.getElementByI d(index));
document.getElementById(index).parentNode.removeChild(document.getEl ementById(index));
document.getElementById(index).parentNode.removeChild(docume nt.getElementById(index));
document.getElementById(index).parentNode.removeChil d(document.getElementById(index));
}

Voici mon code HTML
<td><input type="image" id="id_truc" src="img/suppr.jpg" onClick="suppr_ligne(id_truc)"></td>

Dans la génération du formulaire dynamique, voici la déclaration js de la ligne ci-dessus, mais qui est récalcitrante... et sur laquelle j'ai besoin d'aide ! j'intègre cela dans une table et l'image apparait bien, mais elle n'est pas "cliquable"...
...
myButonSup = document.createElement("img");
myButonSup.id = id_truc;
myButonSup.src = "img/suppr.jpg";
myButonSup.border = 0;
myButonSup.onClick = function() { suppr_ligne(id_truc); };
...

En remercient ceux ou celles qui pourront me venir en aide !

Philreut

bonjour

onclic avec un c minuscule

myButonSup.onclick = function() { suppr_ligne(id_truc); };

OK, j'ai corrigé, mais cela n'a pas d'effet. Je n'ai pas de changement de curseur quand je suis sur l'image : il reste ne détecte pas que c'est une "zone d'action" (il n'affiche pas la fameuse 'main').

Une autre suggestion ?

>>OK, j'ai corrigé, mais cela n'a pas d'effet
c'est qu'il y a une autre erreur alors !
( "id_truc" ??? )
kazma a donné la solution, mais
comme vous ne nous montrez pas tout....
ch'tiot excemple ?

Bon, alors voici mon code (attention, j'utilise smarty, donc pas de codes PHP et les variables telles que {$xxxx} )

{literal}

<script language="JavaScript" type="text/javascript">



var rowExist=parseInt({/literal}'{$nbLi}'{literal})+1;



var nextRow;

function ajout_ligne(table, typePresta) {

if (nextRow == null) nextRow = rowExist ;

//alert(nextRow);

//On va créer 5 colonnes

myColumnIndex = document.createElement("td");

myColumnLibelle = document.createElement("td");

myColumnQte = document.createElement("td");

myColumnPU = document.createElement("td");

myColumnType = document.createElement("td");

myColumnSup = document.createElement("td");

//A la colonne index, on lui ajoute un enfant. Cet enfant sera simplement du text (createTextNode), en l'occurence, l'index de la ligne

myColumnIndex.appendChild(document.createTextNode(nextRow));



//On va créer l'input du libellé de la prestation

myInputLibelle = document.createElement("input");

myInputLibelle.id = 'libelle_' + nextRow; //On définit l'id de notre input

myInputLibelle.name = myInputLibelle.id; //On définit le name de l'input - Dans notre cas, c'est le même que l'id

myInputLibelle.size = 80; //On définit la taille de l'input

myInputLibelle.maxlength = 100; //On définit la taille max de l'input

myInputLibelle.value = myInputLibelle.id;

//A la colonne prestation, on lui ajoute un enfant. Cet enfant sera simplement le input que l'on vient de créer

myColumnLibelle.appendChild(myInputLibelle);



myInputQte = document.createElement("input");

myInputQte.id = 'qte_' + nextRow;

myInputQte.name = myInputQte.id;

myInputQte.maxlength = 6;

myInputQte.value = 0;

//On ajoute l'input aux enfants de la colonne qte

myColumnQte.appendChild(myInputQte);



myInputPU = document.createElement("input");

myInputPU.id = 'puttc_' + nextRow;

myInputPU.name = myInputPU.id;

myInputPU.maxlength = 6;

myInputPU.value = 0;

//On ajoute l'input aux enfants de la colonne PU

myColumnPU.appendChild(myInputPU);



myInputType = document.createElement("input");

myInputType.id = 'type_' + nextRow;

myInputType.name = myInputType.id;

myInputType.type = 'hidden';

myInputType.value = typePresta;

//On ajoute l'input aux enfants de la colonne Type

myColumnType.appendChild(myInputType);



// On créé le bouton suppression





myButonSup = document.createElement("img");

myButonSup.id = nextRow;

myButonSup.src = "img/suppr.jpg";

myButonSup.border = 0;

myButonSup.href = "#";

myButonSup.onclick = function() { suppr_ligne(nextRow); };



//On créer une ligne: tr

myRow = document.createElement("tr");

myRow.id = 'ligne_' + nextRow;

//On lui ajoute 5 enfants (les 5 colonnes)

//myRow.appendChild(myColumnIndex);

myRow.appendChild(myColumnLibelle);

myRow.appendChild(myColumnQte);

myRow.appendChild(myColumnPU);

myRow.appendChild(myColumnType);

myRow.appendChild(myButonSup);



//On récupère notre conteneur

myTable = document.getElementById(table);

//On lui ajoute un enfant: la ligne (cette ligne contient 5 enfants - 5 td - qui eux mêmes contiennent des enfants, etc....)

myTable.appendChild(myRow);



nextRow = nextRow+1;

}





function suppr_ligne(index) {

document.getElementById(index).parentNode.removeChild(document.getElementById(index));

document.getElementById(index).parentNode.removeChild(document.getElementById(index));

document.getElementById(index).parentNode.removeChild(document.getElementById(index));

document.getElementById(index).parentNode.removeChild(document.getElementById(index));

}



</script>

{/literal}



<!-- début tpl list -->



<form method="POST" action="modif_fact_maj.php">

<div>

<table>

<tr>

<td>Facture n°<b>{$idFactToModif}</b> du client <b>{$nom} {$prenom}</b> avec {$nbLi} prestations.</td>

</tr>

<tr>

<td>Date de la Facture :<input size=8 style="text-align:center;" value={$date} name="newDate"></td>

</tr>



</table>

</div>

<br>

<br>

<div>

<table>

<tr>

<td><h4>Prestations</h4></td>

</tr>

{section loop=$prestaPrestaP name=idx}

<tr>

<td><input value="{$prestaPrestaP[idx].libelle}" id="{$prestaPrestaP[idx].id_prestation}" name="newLibelleP_{$prestaPrestaP[idx].id_prestation}" size=80></td>

<td><input style="text-align:right;" id="{$prestaPrestaP[idx].id_prestation}" value="{$prestaPrestaP[idx].id_prestation}" name="newQteP_{$prestaPrestaP[idx].id_prestation}" ></td>

<td><input style="text-align:right;" id="{$prestaPrestaP[idx].id_prestation}" value="{$prestaPrestaP[idx].puttc}" name="newPuttcP_{$prestaPrestaP[idx].id_prestation}" ></td>

<td><input type="image" id="{$prestaPrestaP[idx].id_prestation}" src="img/suppr.jpg" onClick="suppr_ligne({$prestaPrestaP[idx].id_prestation})"></td>

</tr>

{/section}

</table>



<a href="#" onClick="ajout_ligne('tablePR', 'P')"><img src="img/ajout.jpg" border=0></a>

<table id="tablePR"></table>

<br>



<table>

<tr>

<td><h4>Main d'Oeuvre</h4></td>

</tr>

{section loop=$prestaPrestaMo name=truc}

<tr>

<td><input value="{$prestaPrestaMo[truc].libelle}" id="{$prestaPrestaMo[truc].id_prestation}" name="newLibelleMo_{$prestaPrestaMo[truc].id_prestation}" size=80></td>

<td><input style="text-align:right;" id="{$prestaPrestaMo[truc].id_prestation}" value="{$prestaPrestaMo[truc].id_prestation}" name="newQteMo_{$prestaPrestaMo[truc].id_prestation}"></td>

<td><input style="text-align:right;" id="{$prestaPrestaMo[truc].id_prestation}" value="{$prestaPrestaMo[truc].puttc}" name="newPuttcMo_{$prestaPrestaMo[truc].id_prestation}"></td>

<td><input type="image" id="{$prestaPrestaMo[truc].id_prestation}" src="img/suppr.jpg" onClick="suppr_ligne({$prestaPrestaMo[truc].id_prestation})"></td>

</tr>

{/section}

</table>



<a href="#" onClick="ajout_ligne('tableMO', 'M')"><img src="img/ajout.jpg" border=0></a>

<table id="tableMO"></table>



<br>

</div>

<br>

<div>

<table>

<tr>

<td><INPUT border=0 src="img/enreg.jpg" type=image Value=send align="middle" ></td>

<td><a href="liste_factures.php"><img src="img/annul.jpg" border=0></a></td>

</tr>

</table>

</div>

</form>



<!-- fin tpl list -->

>>donc pas de codes PHP et les variables telles que {$xxxx}
ah bon ?
je lisais : Smarty est un moteur de template pour PHP !
quelque part, s'il n'y a pas de php, je ne comprend plus...

vous n'êtes probablement pas obligé de nous
mettre toute votre "page" non plus !
c'est typique, ça.
dans un 1er temps, on a trop peu d'infos
( kazma a parfaitement répondu mais il semble
que d'autres erreurs existent ), et dans un 2ème
temps : tiens v'la tout et débrouillez vous
( mais sans avoir ce qu'il faut pour tester néanmoins !
base de données, par exemple )
moi ça me décourage, je vais laisser
kazma sur ce coup là.

Ben si le code PHP n'est pas dans ce fichier...
Je pensais que tout le fichier pouvait vous éclairer...
Merci du coup de main !
Néanmoins, j'ai eu des réponses par ailleurs ainsi que la solution (pour ceux qui auraient éventuellement les mêmes pb que moi...)

Déclaration de l'objet :
myButonSup = document.createElement("input");
myButonSup.setAttribute("type", "image" );
myButonSup.setAttribute("id", nextRow);
myButonSup.setAttribute("src", "img/suppr.jpg");
myButonSup.border = 2;
myButonSup.onclick = function() { suppr_ligne(this); };


La fonction qui va avec :
function suppr_ligne(obj) {
while(obj && obj.tagName.toLowerCase() != 'tr') obj = obj.parentNode; // On remonte l'arborescence DOM pour trouver la ligne dans laquelle est l'objet
// Maintenant obj est la ligne à supprimer
if(obj) obj.parentNode.removeChild(obj); // On supprime la ligne du tableau

}