JQuery实现可直接编辑的表格


Posted in Javascript onApril 16, 2015

本文实例讲述了JQuery实现可直接编辑的表格。分享给大家供大家参考。具体分析如下:

功能:

创建一个表格,用户单击某个单元格后,可以直接修改单元格文本。
在编辑状态下,用户可按回车键确认修改,按ESC键撤销修改。

效果如下图:

JQuery实现可直接编辑的表格

思路:

当用户点击某个单元格后,立即向该单元格内插入一个文本框,将它的宽、高都设置成与单元格相的数值。用户确认输入后,清空该单元格内的所有HTML代码,然后把内容设置为用户刚刚输入的文本。

HTML代码:

<table align="center"> 
 <tr> 
 <td>学号</td> 
 <td>姓名</td> 
 </tr> 
 <tr> 
 <td>001</td> 
 <td>dog</td> 
 </tr> 
 <tr> 
 <td>002</td> 
 <td>cat</td> 
 </tr> 
 <tr> 
 <td>003</td> 
 <td>pig</td> 
 </tr> 
</table>

JavaScript代码:

$(function(){ 
 $("td").click(function(event){ 
  //td中已经有了input,则不需要响应点击事件
  if($(this).children("input").length > 0) 
   return false; 
  var tdObj = $(this); 
  var preText = tdObj.html();
  //得到当前文本内容 
  var inputObj = $("<input type='text' />");
  //创建一个文本框元素 
  tdObj.html(""); //清空td中的所有元素 
  inputObj 
   .width(tdObj.width())
   //设置文本框宽度与td相同 
   .height(tdObj.height()) 
   .css({border:"0px",fontSize:"17px",font:"宋体"})
   .val(preText) 
   .appendTo(tdObj)
   //把创建的文本框插入到tdObj子节点的最后
   .trigger("focus")
   //用trigger方法触发事件 
   .trigger("select"); 
  inputObj.keyup(function(event){ 
   if(13 == event.which)
   //用户按下回车 
   { 
    var text = $(this).val(); 
    tdObj.html(text); 
   } 
   else if(27 == event.which)
   //ESC键 
   { 
    tdObj.html(preText); 
   } 
  }); 
  //已进入编辑状态后,不再处理click事件 
  inputObj.click(function(){ 
   return false; 
  }); 
 }); 
});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
JS中捕获console.log()输出的方法
Apr 16 #Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 #Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 #Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 #Javascript
JavaScript动态修改背景颜色的方法
Apr 16 #Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 #Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 #Javascript
You might like
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
AngularJS 异步解决实现方法
2017/06/12 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python挖矿算力测试程序详解
2019/07/03 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python 实现性别识别
2020/11/21 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
安全生产活动月方案
2014/03/09 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
文明单位申报材料
2014/12/23 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
Python爬虫实战之爬取携程评论
2021/06/02 Python
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL