注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网事

备忘录

 
 
 

日志

 
 

JQuery实现可编辑的表格  

2010-01-07 10:09:11|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
$(document).ready(function(){  
    //找到所有的td节点  
    var tds=$("#datalist").find('td');
 //给每个单元格添加tooltip
 tds.attr('title','单击编辑该单元格数据');   
    //给所有的td添加点击事件  
    tds.click(function(){  
        //获得当前点击的对象  
        var td=$(this); 
        //取出当前td的文本内容保存起来  
        var oldText=td.text();  
        //建立一个文本框,设置文本框的值为保存的值     
        var input=$("<input type='text' value='"+oldText+"'/>");   
        //将当前td对象内容设置为input  
        td.html(input);  
        //设置文本框的点击事件失效  
        input.click(function(){  
            return false;  
        });  
        //设置文本框的样式  
        input.css({"height":"100%","border-width":"0","font-size":"12px","background-color":"#FFFFE1"});    
        //设置文本框宽度等于td的宽度  
        input.width(td.width());  
        //当文本框得到焦点时触发全选事件    
        input.trigger("focus").trigger("select");   
        //当文本框失去焦点时重新变为文本  
        input.blur(function(){  
            var input_blur=$(this);  
            //保存当前文本框的内容  
            var newText=input_blur.val();   
            td.html(newText);   
        });   
        //响应键盘事件  
        input.keyup(function(event){  
            // 获取键值  
            var keyEvent=event || window.event;  
            var key=keyEvent.keyCode;  
            //获得当前对象  
            var input_blur=$(this);  
            switch(key)  
            {  
                case 13://按下回车键,保存当前文本框的内容  
                    var newText=input_blur.val();   
                    td.html(newText);   
                break;  
                case 27://按下esc键,取消修改,把文本框变成文本  
                    td.html(oldText);   
                break;  
            }  
        });  
    });  
}); 
  评论这张
 
阅读(217)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018