добавить входной текст в HTML-таблицу тд при двойном щелчке

Question

У меня есть html-таблица со строками, в одной из ячеек которой я хочу иметь возможность вставлять входной текст внутри ячейки всякий раз, когда по ней дважды щелкают. и когда этот вход включен, я хочу удалить его и увидеть его значение внутри тд.

это мой код:

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

Проблема в том, что когда я дважды щелкаю по входу, я получаю текст inuput внутри него .. как я могу предотвратить это? как я могу решить эту проблему?

UPDATE:

внутри ввода я вижу этот текст:

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

Заранее благодарен.

Answer 1

Извините за недопонимание, это чистая версия javascript

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

html код

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

jquery версия все еще на http://jsfiddle.net/ZLmgZ/

Answer 2

Пожалуйста, посмотрите на эту ссылку

Я добавил код для вашей функции.

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

Дайте мне знать, если это работает для вас.