随笔-124  评论-49  文章-56  trackbacks-0
1脚本jqueryedit.js

//在页面装载时,让所有的td都有一个点击事件
$(document)ready(function(){
    
//找到所有的td节点
    var tds=$("td");
    
//给所有的td节点增加点击事伯
    tds.click(function(){
      
//0保存当前的td节点
      var td=$(this);
        
//1取出td里面的内容
        var text=td.text();
        
//2清空td里面的内容
        td.html("");//也可以用td.empty();
        //3建立一个文本框,也就是input的元素节点
        var input=$("<input>");
        
//4设置文本框的值是保存起来的文本内容
        input.attr("value",text);//设置属性值
        //4.5让文本框可以响应键盘按下事件,主要用于处理回车确认
        input.keyup(function(event){
          
0.获取当前用户按下的键值
          
var myEvent=event||window.event;
          
var kcode=myEvent.keyCode;
            
1.判断是否是回车按下
            
if(kcode==13){
                
var inputnode=${this};
                
//2.保存当前文本框的内容
          var inputtext=inputnode.val();
                
//3.清空td里面的肉容
                var tdNode=inputnode.parent();
                
//4.将保存的文本框的空容填充到td中
                tdNode.html(inputtext);
                
//5.让td重新拥有点击事件
                tdNode.click();
            }

        }
);
        
//5将文本框加入到td中
        td.append(input);//也可以用input.appendTo(td);加添节点
        //5.5让文本框里面的文字被高亮选中
        //需要将jquery的对象转换成dom对象
        var inputdom=input.get(0);
        inputdom.select();
        
//6移除点击事件
        td.unbind("click");
    }
);
}
);

2页面jqueryEdit.html

<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
<head>
<body>
<table border="1px">
    
<tr>
        
<td>123123</td>
        
<td>456456</td>
    
</tr>
</table>
</body>
</html>
posted on 2009-11-03 10:23 junly 阅读(209) 评论(0)  编辑  收藏 所属分类: ajax/jquery/js

只有注册用户登录后才能发表评论。


网站导航: