ajouter de saisie de texte en tableau html td lors d'un double clic

J'Ai un tableau html avec des lignes, dans l'une des cellules que je veux être en mesure d'insérer une entrée de texte à l'intérieur de la cellule à chaque fois que c'est un double-clique. et lorsque cette entrée est onblured je veux le supprimer et de le voir, c'est la valeur à l'intérieur de la td.

c'est mon code:

<td dir='ltr' id='test1' class='tLine' nowrap ondblclick='addInput(this);'>sdadfew</td>

        function addInput(xxx) {      
          var id = xxx.id;
          var value = document.getElementById(id).innerHTML;
          document.getElementById(id).innerHTML = "<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>";            
          document.getElementById("input"+id).focus();                
        }

        function closeInput(id) {      
            var value = document.getElementById('input'+id).value;                
            document.getElementById(id).innerHTML = value;                  
        }

Le problème est quand je double-cliquez sur l'entrée-je obtenir le texte de la inuput intérieur de celui-ci..
comment puis-je empêcher que cela se produise? comment puis-je résoudre ce problème?

Mise à JOUR:

à l'intérieur de l'entrée, je vois ce texte :

<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>

Merci À l'Avance.

  • "je reçois le texte de la inuput à l'intérieur." . je n'ai pas understanrd
  • veuillez préciser vos questions. Ce texte en êtes-vous?
  • J'ai mis à jour ma question avec le texte..
InformationsquelleAutor user590586 | 2012-02-29
  1. 2

    Désolé pour le malentendu, c'est de la pure javascript version

    code javascript

    function closeInput(elm) {
    var td = elm.parentNode;
    var value = elm.value;
    td.removeChild(elm);
    td.innerHTML = value;
}

function addInput(elm) {
    if (elm.getElementsByTagName('input').length > 0) return;

    var value = elm.innerHTML;
    elm.innerHTML = '';

    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('value', value);
    input.setAttribute('onBlur', 'closeInput(this)');
    elm.appendChild(input);
    input.focus();
}

    code html

    <table>
    <tr>
        <td dir="ltr" id="test1" class="tLine" nowrap ondblclick="addInput(this)">sdadfew</td>
    </tr>
</table>

    la version jquery encore à http://jsfiddle.net/ZLmgZ/

    • l'exigence est avec javascript uniquement
    • j'ai édité ma réponse.
    • il fonctionne partiellement.. quand je unblur l'entrée, je veux retourner à l'ancienne td (sans le inout) et de voir la nouvelle valeur, je suis entré dans l'entrée..
    • Mon script exactement faire ce que vous dites. J'ai testé sur Chrome 17, Firefox 9 et IE9. upload.arunes.com/addInput.htm
    InformationsquelleAutor arunes
  2. 1

    Jetez un oeil à ce lien

    J'ai ajouté un peu de code sur votre fonction.

    function addInput(xxx) {   
    xxx.setAttribute("ondblclick","return false");
    var id = xxx.id;
    var value = document.getElementById(id).innerHTML;
    document.getElementById(id).innerHTML = "<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>";            
    document.getElementById("input"+id).focus();                
}

    Laissez-moi savoir si son travail pour vous.

    InformationsquelleAutor Amit Soni