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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
js类中获取外部函数名的方法
Aug 19 Javascript
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
Js的Array数组对象详解
Feb 22 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
分享15个Webpack实用的插件!!!
Mar 31 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中adodbzip类实例
2014/12/08 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
python Selenium 库的使用技巧
2020/10/16 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
linux面试题参考答案(9)
2015/01/07 面试题
最新结婚典礼主持词
2014/03/14 职场文书
新闻编辑求职信
2014/04/09 职场文书
社会实践的活动方案
2014/08/22 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
基于Python实现流星雨效果的绘制
2022/03/18 Python
Python实现聚类K-means算法详解
2022/07/15 Python