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 兼容firefox的一些问题
May 21 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
js图片预加载示例
Apr 30 Javascript
深入理解javascript变量声明
Nov 20 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
在Python中处理XML的教程
2015/04/29 Python
Python的Django框架中的Context使用
2015/07/15 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python实现代码统计程序
2019/09/19 Python
如何利用python 读取配置文件
2021/01/06 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
在C#中如何实现多态
2014/07/02 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
生产部主管岗位职责
2014/01/06 职场文书
工作表现评语
2014/01/19 职场文书
篮球赛口号
2014/06/18 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
python批量创建变量并赋值操作
2021/06/03 Python