Изменение содержимого ячейки таблицы с использованием форм ввода

Question

Для практики с Javascript я создал таблицу, в которой на основе выбранной вами ячейки она меняет цвет фона этой ячейки. Теперь я пытаюсь настроить мою таблицу, так что, когда вы нажимаете на ячейку, она открывает окно ввода, в котором вы меняете содержимое ячейки. То, что я думал, будет 10-минутным проектом, как поворот на час выяснения этого. Любая помощь или идеи будут полезны. Благодаря!!

Answer 1

Не слишком жесткий. Вот рабочий образец.

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

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

Answer 2

Было бы полезно, если бы вы предоставили код вы работаете с до сих пор.

Вот общий пример, когда ТД содержит один вход и один текстовый узел.

Рабочий пример:http://jsfiddle.net/NCQv2/

HTML

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

CSS

input { 
    display:none; 
} 

Javascript

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