加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

点击后变为可编辑状态(ajax异步提交)

发布时间:2020-12-16 00:38:48 所属栏目:百科 来源:网络整理
导读:script//相当于在页面中的body标签加上onload事件 $(function(){ //找到所有的td节点 var tds=$("td"); //给所有的td添加点击事件 tds.click(function(){ //获得当前点击的对象 var td=$(this); //取出当前td的文本内容保存起来 var oldText=td.text(); //建
<script>
//相当于在页面中的body标签加上onload事件  
$(function(){  
    //找到所有的td节点  
    var tds=$("td");  
    //给所有的td添加点击事件  
    tds.click(function(){  
        //获得当前点击的对象  
        var td=$(this); 
        //取出当前td的文本内容保存起来  
        var oldText=td.text();  
        //建立一个文本框,设置文本框的值为保存的值     
        var input=$("<input type='text' value='"+oldText+"'/>");
        //alert(oldText);   
        //将当前td对象内容设置为input  
        td.html(input);
        //设置文本框的点击事件失效  
        input.click(function(){  
            return false;  
        });  
        //设置文本框的样式  
        input.css("border-width","0");                
        input.css("font-size","16px");  
        input.css("text-align","left");  
        //设置文本框宽度等于td的宽度  
        input.width(td.width());  
        //当文本框得到焦点时触发全选事件    
        input.trigger("focus").trigger("select");   
        //当文本框失去焦点时重新变为文本  
        input.blur(function(){  
            var input_blur=$(this);        
            //保存当前文本框的内容  
            var newText=input_blur.val();
            //异步保存
            $.ajax({ 
            	type:"POST",url: "http://localhost/weizhuangxiu/index.php?m=formguide&c=save&a=ajaxsave&formid=<?php echo $formid;?>&did=<?php echo $did;?>",data:"note="+newText,success:function(msg){ 
    	            	if(msg=="ok"){ 
    	            		//alert(msg);
    	            	} 
    	            	else 
    	            	{   
        	            	 alert(msg);     	  
    		            	alert("fail");
    	            	} 
            		} 
            	});
           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();
                    //异步保存
                    $.ajax({ 
                    	type:"POST",success:function(msg){ 
            	            	if(msg=="ok"){ 
            	            		//alert(msg);
            	            	} 
            	            	else 
            	            	{   
                	            	 alert(msg);     	  
            		            	alert("fail");
            	            	} 
                    		} 
                    	});   
                    td.html(newText);  
                   
                break;  
                  
                case 27://按下esc键,取消修改,把文本框变成文本  
                    td.html(oldText);   
                break;  
            }  
        });  
    });  
});  

</script>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读