不知道有没有用过google的在线文档服务， 有excel类型的文档， 大家都知道excel每个单元格都可以编辑， 这里我来说说我实现的思路， 高手有高手的想法和做法， 但是我们菜鸟也可以偶尔的冒充一把， 不亦乐乎， 呵呵。
第一步： 准备工作，建立个tabedit.html
里面的内容很简单， 建立个5X5的表格, 代码如下：
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双击单元格变成可编辑的文本框</title>
</head>
<body>
<table border="1" width="100%" id="table1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
|
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 = "<input id='inputItem type=text>'"
|
完成该功能还需要一个变量（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;
}
}
|
综合上面所说给出全部代码:
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language="javascript">
<!--
var inputItem; // 输入框句柄
var g_activeItem; // 保存正在编辑的单元格
function changeToText(obj){
if( obj && inputItem ) {
// 如果存在正在编辑的单元格， 则取消编辑状态， 并将编辑的数据保存起来
var str = inputItem.value;
obj.innerText = str;
}
}
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;
}
document.attachEvent('ondblclick',function(){
if (event.srcElement.tagName.toLowerCase() == "td") {
if( !inputItem ) {
inputItem = document.createElement('input');
inputItem.type = 'text';
inputItem.style.width = '100%';
inputItem.style.height = '18px';
inputItem.style.fontSize = '12px';
}
changeToText()
changeToEdit(event.srcElement);
} else {
event.returnValue = false;
return false;
}
});
document.attachEvent('onclick', function(){
if( event.srcElement.parentNode == g_activeItem || event.srcElement == g_activeItem ) {
return;
} else {
changeToText(g_activeItem);
}
})
//-->
</script>
</head>
<body>
<table border="1" width="100%" id="table1">
<tr>
<td width='130'>Test </td>
<td width='130'> </td>
<td width='130'> </td>
<td width='130'> </td>
<td width='130'> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body></html>
|
演示地址: http://www.onlyaa.com/examples/tabedit/index.htm
