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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
angular实现form验证实例代码
Jan 17 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
vue使用recorder.js实现录音功能
Nov 22 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控制器
2016/04/07 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
php和asp语法上的区别总结
2019/05/12 PHP
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
c++工程师面试问题
2013/08/04 面试题
名人演讲稿范文
2013/12/28 职场文书
计算机个人求职信范例
2014/01/24 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
教学反思怎么写
2016/02/24 职场文书