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 相关文章推荐
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
Express框架之connect-flash详解
May 31 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 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
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
浅谈Python基础之I/O模型
2017/05/11 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python 多线程重启方法
2019/02/18 Python
Django如何将URL映射到视图
2019/07/29 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
护理专业自荐信
2013/12/03 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
十八大报告观后感
2014/01/28 职场文书
高二物理教学反思
2014/02/08 职场文书
运动会入场词60字
2014/02/15 职场文书
绿色学校实施方案
2014/03/31 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技