入力フォームを使用してテーブルのセル内容を変更する

Question

Javascriptでの練習では、クリックしたセルに基づいてそのセルの背景色を変更するテーブルを作成しました。今、テーブルをセットアップしようとしています。そのため、セルをクリックすると、セルの内容を変更する入力ボックスが開きます。私が思ったのは、10分のプロジェクトで、1時間になると分かりました。どんな助けやアイディアも参考になります。ありがとう!!

Answer 1

あまりにも難しいです。ここに実例があります。

http://jsfiddle.net/B5rvp/2/

$('td').click(function(){ 
    var answer = prompt("Enter New Value", ''); 
    $(this).html(answer);   
}); 

Answer 2

あなたがこれまでに取り組んでいるコードを提供されている場合には参考になります。

ここには、TDに1つの入力ノードと1つのテキストノードが含まれている一般的な例があります。

実施例：http://jsfiddle.net/NCQv2/

HTML

<table> 
    <tr><td>CLICK HERE<input></td></tr> 
</table> 

CSS

input { 
    display:none; 
} 

ジャバスクリプト

var td = document.getElementsByTagName('td')[0]; 

td.onclick = function(e) { 
    var e = e || event; 
    var target = e.target || e.srcElement; 
    if(target.nodeName !== "INPUT") { 
     var input = this.getElementsByTagName('input')[0]; 
     if(input && input.style.display !== 'inline') { 
      input.style.display = 'inline'; 
      input.value = this.firstChild.data; 
      input.previousSibling.data = ''; 
      input.focus(); 
     } 
    } 
}; 

td.getElementsByTagName('input')[0].onblur = function() { 
    this.previousSibling.nodeValue = this.value; 
    this.style.display = 'none'; 
};