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 相关文章推荐
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
微信小程序删除处理详解
Aug 16 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 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
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python 对key为时间的dict排序方法
2018/10/17 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
初中音乐教学反思
2014/01/12 职场文书
中学生自我鉴定
2014/02/04 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
小学生倡议书范文
2014/05/13 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
中学语文教学反思
2016/02/16 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers