本人急需一个可直接编辑的表格插件,就是点在某一个数据项上,它会自动变成可编辑的类似文本框这样的状态。
我找了好久找不到
谁能推荐一下?

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>jquery表格编辑</title>
        <script type="text/javascript" src="jslib/jquery.js"></script>
        <script type="text/javascript" src="jslib/jqueryedit.js"></script>
    </head>
    <body>
    <table border="1">
        <tr>
            <td>12345</td>
            <td>2466</td>
        </tr>
    </table></body>jqueryedit.js文档内容
    $(document).ready(function(){
        var tds = $("td");
        tds.click(tdclick);
    })function tdclick(){        //0.获取当前的TD元素
            var td=$(this);
            //1.保存TD元素中的内容
            var tdValue=td.text();
            //2.清空td中的内容,也可以用html("")
            td.empty();
            //3.建立input元素
            var input = $("<input>");
            //4.将td中的内容,放入到input中
            //input.attr("type","text");
            input.attr("value",tdValue);        input.keyup(function(even){
                // 0. 获取当前用户按下的键值
            // 解决不同浏览器获取事件对象的差异
                var myEvent=even || window.event;
                var keycode=myEvent.keyCode;
                if(13 == keycode){
                    //获取当前的input元素
                    var inputNode=$(this);
                    //取得input中的value值
                    var inValue=inputNode.val();
                    //清空td中的内容
                    var tdNode=inputNode.parent();
                    tdNode.html("");
                    //将input中的value值放入到td中.
                    tdNode.html(inValue);
                    //将td重新注册click事件
                    tdNode.click(tdclick);
                }else if(27 == keycode){
                    //27是对于键盘的ESC键
                    //$(this)是获得当前的input jquery对象
                    var inputNode=$(this);
                    //parent()获得当前对象的父对象
                    var tdNode=inputNode.parent();
                    //清空td中的内容
                    tdNode.empty();
                    //因为前面保存过td中的值,所以用.html(tdValue)
                    tdNode.html(tdValue);
                    //重新注册click事件.
                    tdNode.click(tdclick);
                }
            });
               //5.将文本框加入到,用append(input),将input加入
            //或者也可以用input.appendTo(td);就是将input加入到td中去        td.append(input);
            //通过jquery对象的get方法,取得dom对象,参数中的0表示第一个对象.
            //相当于对象的下标
            var inputDom=input.get(0);
            inputDom.select();
            //解除click事件
            td.unbind("click");    
    }