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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
JavaScript 调试器简介
Feb 21 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
es6函数之尾调用优化实例分析
Apr 25 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
JavaScript类库D
2010/10/24 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
一套VC试题
2015/01/23 面试题
财务会计应届生求职信
2013/11/24 职场文书
党日活动总结
2014/05/07 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
大学生年度个人总结
2015/02/15 职场文书
销售会议开幕词
2016/03/04 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
Oracle锁表解决方法的详细记录
2022/06/05 Oracle