可编辑表格(table)的一个实现

最新推荐文章于 2023-10-18 16:20:53 发布

原创最新推荐文章于 2023-10-18 16:20:53 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#IE #脚本 #浏览器 #JavaScript #工作 #ViewUI

Web2.0 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一款实用的表格编辑JS脚本，该脚本允许用户通过双击表格单元格进入编辑状态，并提供了基本的输入框操作功能。文章详细展示了脚本的工作原理及使用方法。

写了好几篇关于表格的操作的JS脚本设计了，倒不是说我个人有表格情结，实在是日常工作中表格用的地方太多，但是又由于表格本身不太好操作，所以用JS脚本化一下，还是比较有必要的。

把前一段时间做的一个表格编辑的脚本整理了一下，拿出来跟大家共享一下，按照惯例，先看效果图，然后贴代码，然后分析代码。

单击表格中的一个cell进入编辑状态，在这个实现中，选中的cell会被一个红框括起来，在编辑完成后，恢复表格本身的视图，如下图：

可以看到，第四行，第3列的ISN由小写字母修改为大写字母了。代码还是比较简单的，如下：

function editCell(event){
	var currentCell;
	
	if(event == null){
		currentCell = window.event.srcElement;
	}else{
		currentCell = event.target;	
	}
	
	if(currentCell.tagName.toLowerCase() == "td"){
		var input = document.createElement("input");
        input.type = 'text';
        input.setAttribute('class', 'editable');
        input.value = currentCell.innerHTML;
        input.width = currentCell.style.width;
        
        input.onblur = function(){
            currentCell.innerHTML = input.value;
            //currentCell.removeChild(input);
        };
        input.onkeydown = function(event){
            if(event.keyCode == 13){
                input.blur();
            }
        };

        currentCell.innerHTML = '';
        currentCell.appendChild(input);
        input.focus();
	}	
}

在onBlur(失焦)事件时，本来打算删除这个临时创建的Input,但是FF老是报错，暂时注释掉，如果你有更好的解决方法，请告诉我，谢谢。

使用方式，只需要在table加载完成之后，我们就可以给它注册一个编辑器(Editor)。

<script type="text/javascript">
	function setToEditable(tableid){
		document.getElementById(tableid).ondblclick=editCell;	
	}
</script>

<body onload="setToEditable('editable')">

这样就可以了，下面是代码的简单解释：

如果鼠标当前点击的是table，则触发一个event，浏览器的DOM解析器会知道点击的是什么位置，我们只关注点击的是td的情况(cell)
创建一个临时的input框
将cell中的内容复制给Input
给这个Input注册一些时间处理函数，onblur,onkeydown等以便处理我们的动作
将input控件添加到cell的儿子节点上，然后设置焦点

P.S

本来以为，如果一切都按照W3C标准来开发的话，跨浏览器就是一件很容易的事，然而，当使用了M$的IE浏览器之后才知道，事情不是这样的，理想和现实是有差距的。这个脚本在IE下竟然不能正确work(红框狂不见了)，如果你有好的解决方案，请告诉我，谢谢！

可编辑表格(table)的一个实现

1 条评论