juqery 点击可编辑表格,ajax无刷新保存数据

  </script>


 //  我这里做了一些限制,classname = 特定的值才可以编辑,如果不需要就去掉,另外ajax函数需要自己定义仿照就好了。
    function changeToText(obj){ 

            if(obj.text() != "") {
                 var arr = {'普通':1, 'A级':2, 'AA':3};
                 if(obj.attr("class" == "site_rank" )){
                 
                     var url = "http://dev.bmms.com/sum_target_site_do.php?key="+obj.attr("class")+"&val="+arr[obj.text()]+"&id="+obj.attr("id");
                     console.log(url);
                 }else{
                     var url = "http://dev.bmms.com/sum_target_site_do.php?key="+obj.attr("class")+"&val="+obj.text()+"&id="+obj.attr("id");
                 }
                //var okmsg = save(obj.className,str,obj.id);
                
 
                var xmlHttp = new XMLHttpRequest();
                
                xmlHttp.open('GET',url , true);
                xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                xmlHttp.send();
                xmlHttp.onreadystatechange = function() {
                    console.log("访问服务器成功:");
                    console.log(xmlHttp.responseText);
                    if (this.status == 200) {
                        var content  = xmlHttp.responseText;
                          console.log(content);
           
                    }else{
                        alert("ajax 请求失败!");
                    } 
                    }

            } 
                
            
        } 
    
$(function(){  
    //找到所有的td节点  
    var tds=$("td");  
    //给所有的td添加点击事件  
    tds.click(function(){  
        
        //获得当前点击的对象  
        var td=$(this);  
        if (td.attr("class") != "status" && td.attr("class") != "remark" && td.attr("class") != "site_rank"){
           return "";
        }

        //取出当前td的文本内容保存起来  
        var oldText=td.text();  
        //建立一个文本框,设置文本框的值为保存的值   
        if(td.attr("class") == "site_rank"){
            var selstr = "<select>"
            var a = new Array('普通', 'A级', 'AA') 
            for (var i=0;i<=2;i++){
                 j = i+1;
                if(oldText == a[i]){
                    selstr = selstr+"<option selected value='"+j+"'>"+a[i]+"</option>";
                }else{
                   
                    selstr = selstr+"<option value='"+j+"'>"+a[i]+"</option>";
                }
            }
            selstr = selstr+"</select>";
             
            var input=$(selstr);   
        
        }else{  
            var input=$("<input type='text' value='"+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","center");  
        //设置文本框宽度等于td的宽度  
        input.width(td.width());  
        //当文本框得到焦点时触发全选事件    
        input.trigger("focus").trigger("select");   
        //当文本框失去焦点时重新变为文本  
        input.blur(function(){  
            
            var input_blur=$(this);  
            //保存当前文本框的内容  
            var newText=input_blur.val();   
            if(td.attr("class") == "site_rank"){
             
                  var a = new Array('普通', 'A级', 'AA');
                  j = newText -1;
                  newText = a[j];
             }else{
             var newText=input_blur.val();   
             }
            td.html(newText);  
            changeToText(td); 
            
        });   
        //响应键盘事件  
        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);   
                    changeToText(td); 
                break;  
                  
                case 27://按下esc键,取消修改,把文本框变成文本  
                    td.html(oldText);   
                break;  
            }  
        });  
    });  
}); 
    
    </script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值