写了好几篇关于表格的操作的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).οndblclick=editCell;
}
</script>
<body οnlοad="setToEditable('editable')">
这样就可以了,下面是代码的简单解释:
- 如果鼠标当前点击的是table,则触发一个event,浏览器的DOM解析器会知道点击的是什么位置,我们只关注点击的是td的情况(cell)
- 创建一个临时的input框
- 将cell中的内容复制给Input
- 给这个Input注册一些时间处理函数,onblur,onkeydown等以便处理我们的动作
- 将input控件添加到cell的儿子节点上,然后设置焦点
P.S
本来以为,如果一切都按照W3C标准来开发的话,跨浏览器就是一件很容易的事,然而,当使用了M$的IE浏览器之后才知道,事情不是这样的,理想和现实是有差距的。这个脚本在IE下竟然不能正确work(红框狂不见了),如果你有好的解决方案,请告诉我,谢谢!