高手求助，用js如何实现这样的功能？

在table中每个td里都有值，如果点击td,td中出现一个input输入框, 输入框里显示原来td里的值，然后可以修改，修改后失去焦点会保存修改后的值，不修改就显示原来的值。请就用js做，不要用jquery,我不懂jquery

解决方案 »

  1.   

    动态生成input也可以，
    下面这个是用的障眼法
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="gb2312" />
            <title></title>    
            <style>
                * {
                    margin:0; padding:0; font-size:14px;
                }
                table {
                    margin:100px;
                }
                td {
                    width:200px; height:30px; line-height:30px;
                    border:1px solid blue;
                }
                input {
                    width:200px; height:30px; line-height:30px;
                    border:0;
                }
            </style>        
        </head>
        <body>
            <table>
                <tr>
                    <td><input value="1-1" /></td>
                    <td><input value="1-2" /></td>
                </tr>
                <tr>
                    <td><input value="2-1" /></td>
                    <td><input value="2-2" /></td>
                </tr>            
            </table>
            <script>
                function $(el){
                    return typeof el == 'string' ? document.getElementById(el) : el;
                }
                function $t(name, cot){
                    cot = cot || document;
                    return cot.getElementsByTagName(name);
                }
                var arr = $t('input');
                for(var i = 0, len = arr.length; i < len; i++){
                    arr[i].onfocus = function(){
                        this.style.border = '1px solid red';
                        this.parentNode.style.border = '0';
                    }
                    arr[i].onblur = function(){
                        this.style.border = 'none';
                        this.parentNode.style.border = '1px solid blue';
                    }                
                }
            </script>
        </body>
    </html>
      

  2.   

    2楼的方法已经很简单了, 照着那个改就好了.
    还有,用jquery比不用要简单的多...