高手，用js怎么实现这样的功能

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

------解决方案--------------------
动态生成input也可以，
下面这个是用的障眼法。。。

HTML code


<!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>

高手，用js怎么实现这样的功能

相关推荐