</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>
juqery 点击可编辑表格,ajax无刷新保存数据
最新推荐文章于 2022-05-02 17:08:37 发布