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,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
html数组字符串拼接的最快方法
Sep 16 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
Python入门教程之if语句的用法
2015/05/14 Python
python比较两个列表大小的方法
2015/07/11 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python实现EM算法实例代码
2020/10/04 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
简单的辞职信范文
2014/01/18 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python