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 相关文章推荐
jquery高效反选具体实现
May 05 Javascript
js 走马灯简单实例
Nov 21 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
详解Bootstrap插件
Apr 25 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
在JavaScript中调用php程序
2009/03/09 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
利用Python获取操作系统信息实例
2016/09/02 Python
python交互界面的退出方法
2019/02/16 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python动态规划算法实例详解
2020/11/22 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
感恩节活动方案
2014/01/27 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
春季运动会加油词
2015/07/18 职场文书
财务年终工作总结大全
2019/06/20 职场文书
学校就业保障协议书
2019/06/24 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
python创建字典及相关管理操作
2022/04/13 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python