Comment changer une étiquette en textfield avec jQuery quand son lien respectif est cliqué?

Question

J'ai une table et j'en ai besoin quand on clique sur un intervalle particulier, l'intervalle avant qu'il ne change d'une étiquette à un champ de texte. Ce qui suit est la table:

<table> 
    <tbody> 
     <tr> 
      <td><span class="spanName">John Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td> 
     </tr> 
     <tr> 
      <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td> 
     </tr> 
    </tbody> 
</table> 

Maintenant, supposons que le Alter après John Doe est cliqué, la durée avant qu'il doit changer de seulement John Doe à un champ de texte (Ceci est également valable pour tous les autres). Voici comment le résultat ressemblera si la durée alter John Doe est cliqué:

<table> 
    <tbody> 
     <tr> 
      <td><span class="spanName"><input type="text" /></span>&nbsp;<span class="spanDefaultName">Alter</span></td> 
     </tr> 
     <tr> 
      <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td> 
     </tr> 
    </tbody> 
</table> 

Si possible, et je pense qu'il est possible avec jQuery en utilisant: prochaine ou quelque chose de ce genre, je dois mettre en œuvre cela avec en utilisant seulement des classes et non des identifiants.

Aussi, si vous pensez que je devrais utiliser une ancre au lieu d'une portée, s'il vous plaît faites le moi savoir. J'utilise un span simplement à cause de: next et: fonctionnalités précédentes dans jQuery.

Toute aide serait grandement appréciée

Answer 1

Quelque chose comme ceci:

$(".spanDefaultName").click(function() { 
    var text = $(this).prev("span").text(); 
    $(this).prev("span").hide(); 
    $(this).before('<input value="' + text + '" />'); 
    $(this).unbind("click"); 
}); 

Démo: http://jsfiddle.net/karim79/MWwyR/4/

Answer 2

Comment agit-il? $('span.clickable').click(function() { $(this).prevAll('span').last().html('<input ....>'); });

Answer 3

vous devriez être en mesure d'obtenir ce juste la façon dont il est en faisant:

$('.spanDefaultName').click(function() { 
    if($(this).prev().find(':input').length) { 
     var text = $(this).prev().val(); 
     $(this).prev().text(text); 
    } else { 
     var text = $(this).prev().text(); 
     $(this).prev().html('<input type="text" value="' + text + '"/>'); 
    } 
}); 

Cela obtenir le texte de la durée, de créer une zone de texte et insérez votre texte en elle. cela fonctionnera pour toutes les instances de ceci sur la page. Editer: selon la demande mise à jour, cette option bascule sur s'il y a un élément d'entrée dans l'intervalle requis. Si c'est le cas, il retournera au texte en utilisant la valeur de la zone de texte.

Answer 4

Je pense que cela devrait faire ce que vous voulez

$('span.spanDefaultName').click(function() { 

     val = $(this).prev().text(); 
     $(this).prev().remove(); 
     $(this).parent().prepend($('<input type="text" value="' + val + '" />')); 

    }); 

Bien que si vous allez soumettre ce formulaire à votre entrée aura besoin d'un attribut name

Answer 5

Vous obtiendrez la zone de texte sur clic, vous permettez pour ajuster le texte, puis sur flou, réglez la durée avec le nouveau texte entré. Example

JavaScript

$('.spanName').click(function() { 
    var $elem = $(this); 
    var text = $elem.text(); 
    var input = $('<input value="' + text + '" />') 
    $elem.text('').append(input); 
    input.select(); 

    input.blur(function() { 
     var text = input.val(); 
     input.parent().text(text); 
     input.remove(); 
    }); 
}); 

HTML

<table> 
    <tbody> 
     <tr> 
      <td><span class="spanName">John Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td> 
     </tr> 
     <tr> 
      <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td> 
     </tr> 
    </tbody> 
</table>