jQuery实现可以编辑的表格实例详解【附demo源码下载】


Posted in Javascript onJuly 09, 2016

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

今天小编主要给大家讲解一下,如何利用jQuery+js+css实现表格的编辑。接下来,小编就简单总结一下如何实现这个小例子。

第一步:编写html代码,代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>JQuery实例2:可以编辑的表格</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/editTable.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/editTable.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th colspan="2">鼠标点击表格项就可以编辑</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>学号</th>
          <th>姓名</th>
        </tr>
        <tr>
          <td>000001</td>
          <td>张三</td>
        </tr>
        <tr>
          <td>000002</td>
          <td>李四</td>
        </tr>
        <tr>
          <td>000003</td>
          <td>王五</td>
        </tr>
        <tr>
          <td>000004</td>
          <td>赵六</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

分析一下上面的代码,我们很容易看出来table中可以包含thead和tbody,表头的内容可以放到th中,我们来运行一下,看看我们的效果:

jQuery实现可以编辑的表格实例详解【附demo源码下载】

从上面的运行效果来看,我们很容易看出来,这个表格的基本轮廓已经显示出来,但是似乎少了些许味道,接着,我们来设置一下表格的样式,我们来编写css的代码,如下所示:

table {
  border: 1px solid black;
  /*修正单元格之间的边框不能合并*/
  border-collapse: collapse;
  width: 400px;
}
table td {
  border: 1px solid black;
  width: 50%;
}
table th {
  border: 1px solid black;
  width: 50%;
}
tbody th {
  background-color: #A3BAE9;
}

分析一下上面的代码,table{}这种写法称作为标签选择器,可以对整个页面所有的table产生影响;table td{}这种写法表示的是table中包含的所有td;可以通过broder-collapse:collapse这种方式来使表格中的单元格边框合并。接着,我们连运行一下,看看运行的效果:

jQuery实现可以编辑的表格实例详解【附demo源码下载】

上述的运行效果,已经非常接近我们需要实现的效果了,但是还是欠点火候,还是不能都编辑,接着,js里面的代码,相应的,在js中我们也要建立两个文件,一个jquery一个editTable,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以下载文末链接,接着,我们来编写ueditTable的代码,来给整理页面添加行为能力:

//需要首先通过Javascript来解决内容部分奇偶行的背景色不同
//$(document).ready(function(){
//
//});
//简化的ready写法
$(function(){
  //找到表格的内容区域中所有的奇数行
  //使用even是为了把通过tbody tr返回的所有tr元素中,在数组里面下标是偶数的元素返回,因为这些元素,实际上才是我们期望的tbody里面的奇数行
  $("tbody tr:even").css("background-color","#ECE9D8");
  //我们需要找到所有的学号单元格
  var numTd = $("tbody td:even");
  //给这些单元格注册鼠标点击的事件
  numTd.click(function() {
    //找到当前鼠标点击的td,this对应的就是响应了click的那个td
    var tdObj = $(this);
    if (tdObj.children("input").length > 0) {
      //当前td中input,不执行click处理
      return false;
    }
    var text = tdObj.html();
    //清空td中的内容
    tdObj.html("");
    //创建一个文本框
    //去掉文本框的边框
    //设置文本框中的文字字体大小是16px
    //使文本框的宽度和td的宽度相同
    //设置文本框的背景色
    //需要将当前td中的内容放到文本框中
    //将文本框插入到td中
    var inputObj = $("<input type='text'>").css("border-width","0")
      .css("font-size","16px").width(tdObj.width())
      .css("background-color",tdObj.css("background-color"))
      .val(text).appendTo(tdObj);
    //是文本框插入之后就被选中
    inputObj.trigger("focus").trigger("select");
    inputObj.click(function() {
      return false;
    });
    //处理文本框上回车和esc按键的操作
    inputObj.keyup(function(event){
      //获取当前按下键盘的键值
      var keycode = event.which;
      //处理回车的情况
      if (keycode == 13) {
        //获取当当前文本框中的内容
        var inputtext = $(this).val();
        //将td的内容修改成文本框中的内容
        tdObj.html(inputtext);
      }
      //处理esc的情况
      if (keycode == 27) {
        //将td中的内容还原成text
        tdObj.html(text);
      }
    });
  });
});

运行效果如下:

jQuery实现可以编辑的表格实例详解【附demo源码下载】

完整实例代码点击此处本站下载。

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

Javascript 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 #Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 #Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 #Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 #Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 #Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 #Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 #Javascript
You might like
js代码实现微博导航栏
2015/07/30 PHP
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python处理图片之PIL模块简单使用方法
2015/05/11 Python
详解Django中的权限和组以及消息
2015/07/23 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python设置随机种子实例讲解
2019/09/12 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
酒店保安员岗位职责
2014/01/31 职场文书
技术合作协议书范本
2014/04/18 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
运动会新闻稿
2015/07/17 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers