Quelle est la meilleure façon de changer le texte d'un clic de souris en utilisant jQuery?

Question

J'ai une liste que je dois vérifier l'orthographe avant de l'ajouter à la base de données:

<table> 
    <tr> 
    <td>1-1 Some text </td> <td> 1-2Some more text</td> 
    </tr> 
    <tr> 
    <td>2-1 Some text </td> <td> 2-2 Some more text</td> 
    </tr> 
    <tr> 
    <td>3-1 Some text </td> <td> 3-2 Some more text</td> 
    </tr> 
</table> 
<button> Import list to database </button> 

Mon idée est la suivante, en utilisant jQuery:

Lorsque je clique sur le texte dans 2-1, il sera être "remplacé" par une boîte de texte afin que je puisse éditer le texte.

Quelle est la meilleure façon d'y parvenir?

Aurais-je besoin d'un champ caché contenant un champ <input type="text"? Serait-ce la façon la plus simple et la plus élégante de le nommer?

Answer 1

Si vous modifiez votre balisage pour inclure t La zone de saisie, puis quand vous allez remplacer la chaîne "statique" par la fonction text(), vous devrez contourner le fait que l'élément a aussi un élément input.

Une meilleure approche pourrait consister à laisser votre balisage tel quel et à utiliser jquery pour échanger une brique tetxbox au besoin dans la cellule.

Ainsi, lorsqu'un utilisateur clique sur la cellule, vous effectuez les opérations suivantes

1) Lire la valeur actuelle useing la fonction 2 texte()) Remplacer la valeur actuelle avec une étiquette nouvellement créée

Lorsque la hits utilisateur ENTER (ou tout autre méthode pour signifier l'édition est fait) procédez comme suit

1) Lire la valeur d'entrée en cours en utilisant la fonction val() 2) Supprimer l'étiquette 3) Mettez la valeur de retour dans la cellule à l'aide la fonction text()

Answer 2

Bien que ce ne soit pas une réponse directe à votre question, vous devriez vérifier Jeditable. Il est un plug-in qui vous permet de faire ce que vous demandez et plus:

Plugin Page: http://www.appelsiini.net/projects/jeditable

Démo: http://www.appelsiini.net/projects/jeditable/default.html

Answer 3

exemple tat pourrait aider

<table> 
    <tr> 
    <td id="cell1">1-1 Some text </td> 
    </tr> 

</table> 

jquery

$('#cell1').click(function(){ 

     $(this).html("<input type='text' value='"+$(this).text()+"'>"); 
    });