html页面巨量单元格赋值的难题

Question

本人拟做的一个在线的表格（可编辑，可直接保存）程序，做出来之后类似于Excel那种界面及操作方式。
即点即输入的现实很简单，用一个input，点击的时候放在被点击的单元格上面，这样就实现的即时输入。当input失去焦点时将文本框的值赋给之前被单击的单元格。
现在遇到的问题是，当页面上单元格数量少时，感觉不到异常。但当单元格数量增加到10000个（如表格=128行×128列）左右时，能明显感觉到延时，就是从点击单元格到单元格正确出现输入的数据，要大约0.5秒~甚至1秒的时间。
目前采用的单元格赋值的方法是，点击时保存单元格的id，输入完成时按id赋值。测试了一下，延迟最大的部分出现在给单元格赋值这个地方。
做来做去最终感觉javascript的性能难以应付类似的需求，我现在的做法是把单元格的数量控制在最小，5000个左右，但延迟还是明显的。
不知道有没有人做过类似的功能，或提供其他思路！

Answer 1

额 这个很容易
把事件放到table上面
然后用e.target来找实际td 
然后用一个input来复用给所有的table单元格这样的话性能就不是问题了

Answer 2

可以试验下判断 鼠标点击 相对 整个 table的 坐标位置根据坐标位置 计算 那个单元格被点击了

Answer 3

是不用坐标位置的。
var target = event.target || event.srcElement;

Answer 4

忘了说了 table不是好的做法 因为render的速度是最慢的。。

Answer 5

输入完成时为啥要按ID赋值呢？直接input.onblur = function(){
    input.parentNode
}不就是那个单元格了么？取单元格的时候用1楼的做法。

Answer 6

我的意思是试验下 自己获取坐标位置 和 获取e,target那个快

Answer 7

可以弄10000个td试试看。
window.addEventListener('load',function(){
var input = document.createElement('input');
input.type = 'text';
input.addEventListener('blur',function(){
this.parentNode.innerHTML = input.value;
});
document.getElementsByTagName('table')[0].addEventListener('click',function(e){
if(e.target.nodeName.toLowerCase() !== 'td') {
return;
}
var td = e.target;
input.value = td.innerHTML;
td.innerHTML = '';
td.appendChild(input);
input.focus();
});
});

Answer 8

contenteditable=true
你可以试试这个，可以让单元格变得可输入，这样你就不用动态渲染input了

Answer 9

<table style="width:100px;"><tr><td contenteditable=true>可输入td</td></tr></table>
不过刚刚测试ie6下div支持该属性，td不支持
其他浏览器无问题