Problème dans une table modifiable en HTML

Question

J'ai une table en HTML. J'ai rendu cette table aussi éditable en utilisant Javascript. Lorsque l'utilisateur clique sur une cellule, elle devient modifiable. Le problème ici est, quand la cellule est déjà éditable, si l'utilisateur clique de nouveau sur la cellule ...., quelques étiquettes et d'autres choses apparaissent. de nouvelles zones de texte apparaissent pour chaque clic.

Comment cela a-t-il pu être évité?

J'utilise le code Javascript suivant.

function changeContent(tablecell) 
{ 
    //alert(tablecell.firstChild.nodeValue); 
    tablecell.innerHTML = "<INPUT type=text size=\"6\" name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+"\">"; 
    tablecell.firstChild.focus(); 
} 
function submitNewName(textfield) 
{ 
    //alert(textfield.value); 
    textfield.parentNode.innerHTML= textfield.value; 
} 

Answer 1

Si de nouvelles zones de texte apparaissent après chaque clic, votre code ne prend pas en charge le cas: si la cellule a une zone de texte d'entrée déjà, ne pas continuer à entrer HTML supplémentaire pour la zone de texte d'entrée lorsque l'utilisateur clique sur la cellule. Une façon d'éviter cela pourrait être de définir la classe de la cellule du tableau sur un nom de classe comme "editable" à la fin de votre fonction changeContent. Ensuite, vous pouvez avoir du code dans la même fonction qui ne mettra dans le HTML pour la zone de texte d'entrée si le tablecell.className n'est pas "modifiable". N'oubliez pas dans votre fonction submitNewName, de supprimer également le nom de classe "modifiable" pour la cellule une fois que l'utilisateur a terminé la modification.