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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
jQuery链使用指南
Jan 20 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
webpack3之loader全解析
Oct 26 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
node中的密码安全(加密)
Sep 17 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 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
php 生成饼图 三维饼图
2009/09/28 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
初中女生自我鉴定
2013/12/19 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python