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 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
js实现日期级联效果
Jan 23 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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
PHP垃圾回收机制简单说明
2010/07/22 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
JS中的作用域链
2017/03/01 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
全面解析vue中的数据双向绑定
2017/05/10 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
python进阶教程之异常处理
2014/08/30 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Python 内存管理机制全面分析
2021/01/16 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
农业资源与环境专业自荐信范文
2013/12/30 职场文书
中专自我鉴定
2014/02/05 职场文书
小学运动会口号
2014/06/07 职场文书
中央空调节能方案
2014/06/15 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
西柏坡观后感
2015/06/08 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers