jQuery实现的可编辑表格完整实例


Posted in Javascript onJune 20, 2016

本文实例讲述了jQuery实现的可编辑表格。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>可编辑表格</title>
   <script type = "text/javascript" src="jquery-1.7.2.min.js"></script>
  <style type = "text/css">
   body{
    background:#c0c0c0;
   }
   #tab{
    border-collapse:collapse;
   }
   #tab td{
    width:50px;
    height:18px;
    border:1px solid;
    text-align:center;
   }
  </style>
  <script type = "text/javascript">
   $(function(){
    var tds = $("#tab tr td");
    editeTable(tds);
   });
   function editeTable(tds){
    tds.click(function(){
     var td=$(this);
     var oldText=td.text();
     var input=$("<input type='text' value='"+oldText+"'/>");
     td.html(input);
     input.click(function(){
      return false;
     });
     input.css("border-width","1px");
     input.css("font-size","12px");
     input.css("text-align","center");
     input.css("width","0px");
     input.width(td.width());
     input.trigger("focus").trigger("select");
     input.blur(function(){
      td.html(oldText);
     });
     input.keyup(function(event){
      var keyEvent=event || window.event;
      var key=keyEvent.keyCode;
      var input_blur=$(this);
      switch(key)
      {
       case 13:
        var newText=input_blur.val();
        td.html(newText);
        changeCurrConAttrByTable(currTableId);
       break;
       case 27://按下esc键,取消修改,把文本框变成文本
        td.html(oldText);
       break;
      }
     });
    });
   };
  </script>
 </head>
 <body>
  <table id = "tab">
   <tr>
    <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
   </tr>
   <tr>
    <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
   </tr>
   <tr>
    <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
   </tr>
   <tr>
    <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
   </tr>
   <tr>
    <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
   </tr>
  </table>
 </body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 #Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 #Javascript
浅谈JavaScript中数组的增删改查
Jun 20 #Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 #Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 #Javascript
javascript实现随机生成DIV背景色
Jun 20 #Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 #Javascript
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
来自PHP.NET的入门教程
2006/10/09 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
python中global用法实例分析
2015/04/30 Python
import的本质解析
2017/10/30 Python
Python实现KNN邻近算法
2021/01/28 Python
浅析Python数据处理
2018/05/02 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
【python】matplotlib动态显示详解
2019/04/11 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
中专生毕业自我鉴定
2013/11/01 职场文书
主题婚礼策划方案
2014/02/10 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
初中军训感言
2015/08/01 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库