JS双击变input框批量修改内容


Posted in Javascript onDecember 12, 2016

双击空白或者文字变成input框修改内容:

html代码

<td class="center" ondblclick="ShowElement(this,'intro')">{$vo.intro}</td>
<td class="center" ondblclick="ShowElement(this,'address')">{$vo.address}</td>

js代码

//双击修改
function ShowElement(element,abc){
 // console.log(abc);
 var list = abc;
 var me = element;
 var oldhtml = element.innerHTML;
 var newobj = document.createElement('input');
 newobj.type = 'text';//修改新创建的input的类型
 element.innerHTML = '';//清空td中的内容用于存放新创建input;
 $(newobj).attr({ value:oldhtml});
 element.appendChild(newobj);//把input放入td
 //给input对象绑定鼠标移开事件
 newobj.onblur = function(){
  // 判断是否满足发送ajax的条件
  if(this.value != oldhtml){
   element.innerHTML = this.value;
   var value = this.value;
   // alert(value);
   //发送ajax请求
   var id = $(me).parents('.gradeA').find('.sid').html();
   var url = "{:U('Admin/Friend/onclick')}";
   var btn = $(this);
   $.ajax({
      url:url,
      data:{id:id,list:list,value:value},
      type:'post',
      success:function(data){
         console.log(data);
        if(data == 0){
          alert('修改成功')
        }else{
          alert('修改失败');
        }
      }
   })
  }else{
   element.innerHTML = oldhtml;//放入原来的内容
   // return false;
  }
 }
 newobj.focus();
 // return false;
 }

以上所述是小编给大家介绍的JS双击变input框批量修改内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 #Javascript
Websocket协议详解及简单实例代码
Dec 12 #Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 #Javascript
jQuery实现字符串全部替换的方法
Dec 12 #Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 #Javascript
简单实现jquery焦点图
Dec 12 #Javascript
javascript中setAttribute兼容性用法分析
Dec 12 #Javascript
You might like
咖啡与牛奶
2021/03/03 冲泡冲煮
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP个人网站架设连环讲(三)
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
php实现webservice实例
2014/11/06 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP制作万年历
2015/01/07 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python的mysql数据库的更新如何实现
2017/07/31 Python
python实现简单的文字识别
2018/11/27 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
中学生思想品德评语
2014/12/31 职场文书
统计员岗位职责范本
2015/04/14 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书