js动态的修改表格

这个效果是：
1个3行3列空白表格 点一下单元格 就变成文本框可以输入内容   移开光标  内容就留在了表格上有个位置卡住了 ，高手指点下,初学谢谢了<script>
function init(){
var td=document.getElementsByTagName("td");

for(var i=0; i<td.length; i++){
//alert(td[i]);
//td[i].innerText=i;
td[i].onclick=function(){
alert(i);    //这个里面为什么打出来的是td.length？
}
}
}

  </script>

解决方案 »

  1.   

    <style type="text/css">
    td{
    border:thin;
    border-style:solid;
    text-align:center;
    width:100px;
    }
    </style>
    <script type="text/javascript">
     function init(){
      var tds=document.getElementsByTagName("td");
    for(var i=0;i<tds.length;i++){
    var a=document.createElement("input");
    a.type="text";
    a.style.visibility="hidden";
    tds[i].appendChild(a);
    tds[i].onclick=en;
    }
     }
    function en(){
    var a=this.getElementsByTagName("input");
    a[0].style.visibility="visible";
    a[0].focus();
    a[0].onblur=kk;
    }
    function kk(){
    var a=this.value;
    this.style.visibility="hidden";
    this.parentNode.innerHTML=a;
    }
    </script>
    </head><body onload="init()">
    <table>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>
    这样试试   不过方法比较垃圾  等高手来吧  呵呵