ダブルクリックしたときに入力テキストをhtmlテーブルに追加

Question

私はセルをダブルクリックするたびにセル内に入力テキストを挿入できるように、セルの1つに行があるhtmlテーブルを持っています。この入力がonbluredのとき、私はそれを取り除き、それがtdの中の値であることを見たいと思います。

これは私のコードです：

<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コード

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> 

http://jsfiddle.net/ZLmgZ/

Answer 2

でまだjQueryのバージョン、純粋なJavaScriptのバージョン

誤解のために申し訳ありませんですthis link

あなたの機能にいくつかのコードを追加しました。

あなたの仕事がわかったら教えてください。