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 相关文章推荐
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vscode调试node.js的实现方法
Mar 22 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分页类集锦
2014/11/18 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python实现八大排序算法(2)
2017/09/14 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
如何使用repr调试python程序
2020/02/28 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
浅析python 字典嵌套
2020/09/29 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
自荐信写法介绍
2014/01/25 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
Nginx的gzip相关介绍
2022/05/11 Servers