使用输入表单更改表格的单元格内容

问题描述:

对于使用Javascript的练习,我创建了一个基于单击的单元格的表格,它会更改该单元格的背景颜色。现在我正在尝试设置我的表格,以便在单击某个单元格时打开一个输入框,您可以在其中更改单元格的内容。我认为这将是一个10分钟的项目,转向一个小时即可搞清楚。任何帮助或想法都会有所帮助。谢谢!!使用输入表单更改表格的单元格内容

不是太强悍。这是一个工作示例。

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

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

没有任何迹象表明jQuery正在使用? – user113716 2011-02-03 16:02:23

,如果你提供你与迄今使用的代码这将是有益的。

下面是一个通用示例,其中TD包含一个输入和一个文本节点。

工作例如: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'; 
};