首页 > 其他分享 >通过js实现单击或双击直接修改内容

通过js实现单击或双击直接修改内容

时间:2022-10-14 16:34:06浏览次数:69  
标签:单击 oldhtml js element value 双击 newobj id datas

span标签:
<span class="text-info" id="pay_type" οndblclick='edit(this,this.id)'>{if !empty($data['pay_type'])}{$data['pay_type']}{else /}双击文字修改{/if}</span>
js代码:
function edit(element,datas){
var datas = datas;
 var oldhtml = element.innerHTML;//获得元素之前的内容
 var newobj = document.createElement('input');//创建一个input元素
 newobj.type = 'text';//为newobj元素添加类型
newobj.value=oldhtml;
 element.innerHTML = '';   //设置元素内容为空
 element.appendChild(newobj);//添加子元素
 newobj.focus();//获得焦点
//设置newobj失去焦点的事件
 newobj.onblur = function(){
//下面应该判断是否做了修改并使用ajax代码请求服务端将id与修改后的数据提交 name=John&location=Boston
var name = newobj.value;
// alert("id="+{$id}+"&"+datas+"="+name);
$.ajax({ type: "POST",
url: "/admin/order/design_update.php",
data: "id="+{$id}+"&"+datas+"="+name,
dataType: "json",
success: function(msg){
if(msg==1){
alert('修改成功');
}else{
alert('修改失败');
} }
});
//当触发时判断newobj的值是否为空,为空则不修改,并返回oldhtml
element.innerHTML = this.value ? this.value : oldhtml;
}
}

标签:单击,oldhtml,js,element,value,双击,newobj,id,datas
From: https://blog.51cto.com/u_15565664/5757450

相关文章

  • uni-app 24egg.js 基础课
    24.1创建egg.js项目24.2写第一个api接口24.3-24.5router路由相关24.6数据库迁移(一)24.7数据库迁移(二)24.8sequelize模型-新增24.9sequelize模型-批量新增和修改器24.1......
  • js文本框失去焦点和获取焦点时不同显示
    获取焦点时隐藏文本框内容,失去焦点时显示文本框内容 获得焦点事件:onfocus失去焦点事件:onblur css样式代码:<style>.box{width:300px;......
  • PHP低版本 json_encode 保留中文字符
     1.几乎所有版本可以用,而且能解决中文乱码的问题publicfunctionmainLogic(){$arr=['a'=>'测试1','b'=>'测试2',];//jso......
  • Android加载PDF方案(pdf.js,支持缩放)
    都知道,Android本身的webview是不支持pdf加载的(比不上iOS的webview,谁让人家NB呢),因此通过连接Google的一个服务器转换成功后返回给WebView显示。但是,但是,但是呢,大家都懂的,天......
  • egg.js 24.3-24.5router路由相关
    编写路由基础用法//router.jsrouter.get('/admin/:id',controller.admin.index);//controllerasyncindex(){const{ctx}=this;//获取路由get传值参数(路由......
  • egg.js 24.1创建egg.js项目
    安装egg.js全局切换镜像:npmconfigsetregistryhttps://registry.npm.taobao.org我们推荐直接使用脚手架,只需几条简单指令,即可快速生成项目(​​npm>=6.1.0​​):mkdireg......
  • JSP页面实现验证码校验
    目录验证码校验分析生成验证码测试验证码校验验证码测试验证码校验添加验证码刷新在网页页面的使用中为防止“非人类”的大量操作和防止一些的信息冗余,增加验证码校验是许......
  • js 数组对象中每一项对象属性比较大小与计算数组对象属性和
    //数组对象排序方法 exportfunctioncompare(property){   returnfunction(a,b){    constvalue1=a[property]    constvalue2......
  • js用循环添加精灵图的坐标
    用循环添加精灵图的坐标完成效果:css样式代码:<style>ul{width:180px;}li{list-style:none;......
  • JS高级用法-清空数组
    letarr=[12,43]arr.slice(0)//克隆数组arr.splice(0)//克隆数组,意思是返回一个新的数组,arr变为[]arr.length=0//清空数组arr变为[]//也就是说,清空数......