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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
vue实现微信分享功能
Nov 28 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHPThumb图片处理实例
2014/05/03 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php获取excel文件数据
2017/04/21 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
详解tween.js 中文使用指南
2018/01/05 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python实现井字棋游戏
2020/03/30 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python实现动态数组的示例代码
2019/07/15 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
教师绩效考核方案
2014/01/21 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
给老师的感谢信
2015/01/20 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
用python修改excel表某一列内容的操作方法
2021/06/11 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js