java文本框双击可编辑_双击单元格变成可编辑的文本框

不知道有没有用过google的在线文档服务， 有excel类型的文档， 大家都知道excel每个单元格都可以编辑，这里我来说说我实现的思路， 高手有高手的想法和做法， 但是我们菜鸟也可以偶尔的冒充一把， 不亦乐乎， 呵呵。

第一步： 准备工作，建立个tabedit.html

里面的内容很简单， 建立个5X5的表格, 代码如下：

双击单元格变成可编辑的文本框

2. 设计思路:

当鼠标双击的时候 也就是document.ondblclick的时候, 判断当前鼠标事件作用的对象，可以用event.srcElement获得到，然后判断event.srcElement是否是td，也就是判断event.srcElement.tagName是否是单元格， 是的话就进行转换成编辑框， 转换成编辑框有几种做法

1. 动态创建，即使用document.createElement('标签的名字')，代码如下:

inputItem = document.createElement('input');

inputItem.type = 'text';

inputItem.style.width = '100%';

inputItem.style.height = '18px';

inputItem.style.fontSize = '12px';

2. 直接用字符串的创建，代码如下:

var str = "

完成该功能还需要一个变量(g_activeItem)， 用来保存当前编辑的td引用，以便切换到其他td后恢复当前td为文本模式

3. 主要功能实现:

文本转换成可以编辑的输入框

代码如下:

function changeToEdit(obj){

if( !inputItem ) {

inputItem = document.createElement('input');

inputItem.type = 'text';

inputItem.style.width = '100%';

inputItem.style.height = '18px';

inputItem.style.fontSize = '12px';

}

inputItem.style.display = '';

inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上

obj.innerHTML = ''; // 清空单元格的数据

obj.appendChild(inputItem);

inputItem.focus();

g_activeItem = obj;

}

恢复文本显示， 代码如下

function changeToText(obj){

if( obj && inputItem ) {

// 如果存在正在编辑的单元格， 则取消编辑状态， 并将编辑的数据保存起来

var str = inputItem.value;

obj.innerText = str;

}

}

综合上面所说给出全部代码:

新建网页 1

Test