I have an html table with rows, in one of the cells I want to be able to insert an input text inside the cell whenever it is double clicked, and when this input is onblured I want to remove it and see it's value inside the td.

This is my 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;                  
        }   

The problem is when I double click the input I get the text of the input inside of it. How can I prevent this from happening? How can I resolve this issue?

UPDATE:

Inside the input I see this text:

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

I have an html table with rows, in one of the cells I want to be able to insert an input text inside the cell whenever it is double clicked, and when this input is onblured I want to remove it and see it's value inside the td.

This is my 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;                  
        }   

The problem is when I double click the input I get the text of the input inside of it. How can I prevent this from happening? How can I resolve this issue?

UPDATE:

Inside the input I see this text:

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

• javascript
• html
• dom-events

• " i get the text of the inuput inside of it." . i don't understanrd – André Alçada Padez Commented Feb 29, 2012 at 11:37
• please clarify your questions. What text are you getting? – user1199657 Commented Feb 29, 2012 at 11:40
• @Cyphon: I've updated my question with the text.. – user590586 Commented Feb 29, 2012 at 13:40

2 Answers 2

Sorry for misunderstanding, this is the pure javascript version

javascript code

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();
}

html code

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

jquery version still at http://jsfiddle/ZLmgZ/

Please have a look at this link

I have added some code on your function.

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();                
}

Let me know if its work for you.