表格操作是我们常常遇到的，还记得刚開始学习牛腩新闻公布系统时。跟着视频进行表格的一些基本操作。而对它的原理与概念全然不懂，不过跟着老师的操作而进行操作。

通过这次学习，对表格的操作有了进一步的了解与掌握。

首先来看一下其效果：（网页效果：http://192.168.24.71:8010/%E7%BC%96%E8%BE%91%E8%A1%A8%E6%A0%BC/EditTable.html）

实现过程：

HTML代码：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />

<title>JQuery实战2-编辑表格</title>

<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>1</td>

                   <td>王朋波</td>

           </tr>

           <tr>

             <td>2</td>

                   <td>victor</td>

           </tr>

           <tr>

             <td>3</td>

                   <td>wangpengbo</td>

           </tr>

           <tr>

             <td>4</td>

                   <td>wang</td>

           </tr>

         </tbody>

  </table>

</body>

</html></span>

Javascript中的代码：

<span style="font-size:18px;">//须要通过js来解决内部奇偶行背景色不同

$(function(){

         //找到表格内容区域中除了第一个tr以外的全部奇数行

         //使用even是为了把通过tbodytr返回的全部元素中，在数组下标是偶数的元素返回

         $('tbody tr:even').css('background-color','#ECE9D8');

         //须要找到全部的学号单元格

         // $('tbodytd:even').css('background-color','red');

         var numTd=$('tbodytd:even');

         //给这些表格注冊鼠标单击的事件

         numTd.click(function(){

                   //找到当鼠标点击的td。this相应的响应了click的那个id

                   vartdobj=$(this);

                   if(tdobj.children('input').length>0){

                            //当前td中 input。不运行click处理

                            returnfalse;

                   }

                   vartext=tdobj.html();

                   //清空td中的内容

                   tdobj.html('');

                   //创建一个文本框

                   //去掉文本框的边框

                   //设置文本框中文字大小为16px

                   //使文本框的宽度与表格宽度同样

                   // 设置文本框背景色

                   //须要将当前td中的内容放到文本框

                   //将文本框插入。appendTo方法能够将一个节点追加到还有一个节点全部子节点的后面

                   varinputObj=$("<inputtype='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.get(0).select();

                   inputObj.click(function(){

                            returnfalse;   //清除点击td之后出现一个HTML代码

                   })

                   //处理文本框上回车和esc按键操作

                   inputObj.keyup(function(event){

                            //获取当前按下键盘的键值

                            varkeycode=event.which;

                            //处理回车的情况

                            if(keycode==13){

                                     //获取当前文本框内容

                                     varinputtext=$(this).val();

                                     //将td中的内容改动成文本框中 的内容

                                     tdobj.html(inputtext);

                            }

                            //处理esc的情况

                            if(keycode==27){

                                     //将td中的内容还原成text

                                     tdobj.html(text);

                            }

                   })

         })

})</span>

Css样式中的代码：

<span style="font-size:18px;"> 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;

}</span>

这里我们须要应用一个JQuery文件。事实上最基本的难点也在这里。只是，眼下没有对这个进行深入的研究，我们仅仅须要可以从JQuery中找到我们须要的信息。可以使用其包括的方法实现我们的功能就可以。

在本实例中须要注意的地方是奇偶行颜色的设置上，假设不使用JQuery。相对来说有点困难，过程也会繁琐。可是在JQuery中已经有了封装好的方法，even方法是获取奇数行，而odd是获取偶数行。

实例小结：

这次主要是对表格table的操作。由实例能够看出，事实上它也能够看作标签选择器；还有就是JQuery的使用，当中的方法会给我带来众多的便利，熟练掌握这些方法是我们这一阶段所须要做的。

通过这一个小实例的学习，对js的学习有了进一步的认识。尤其是如今跟着做项目，用到js和JQuery的地方有非常多。初次接触的时候。感觉无从下手。

只是。经过这些实例之后，不能说掌握。但最起码已经找到了入手点。所以，学习的同一时候，一定要亲自己主动手操作，哪怕是看似简单的样例。也要用心。

jQuery--编辑表格的更多相关文章

  1. jQuery实现可编辑表格

    在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...

  2. jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  3. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  4. JQuery实现表格自动增加行，对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  5. LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法

    LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...

  6. 老男孩Day17作业：后台管理平台编辑表格

    一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...

  7. easyui datagrid可编辑表格使用经验分享

    文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...

  8. JQuery实现表格动态增加行并对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  9. jquery给表格绑值

    jquery给表格绑值 直接上代码了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  10. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

随机推荐

  1. 场景分割：MIT Scene Parsing 与DilatedNet 扩展卷积网络

    MIT Scene Parsing Benchmark简介 Scene parsing is to segment and parse an image into different image re ...

  2. Clickhouse DDL&DML

    (1)添加列: alter table [db.]table_name add column column_name [type] [default_expr] [after name_after] ...

  3. （转）全文检索技术学习(三)——Lucene支持中文分词

    http://blog.csdn.net/yerenyuan_pku/article/details/72591778 分析器(Analyzer)的执行过程 如下图是语汇单元的生成过程:  从一个Re ...

  4. Windows提高_1.2遍历进程、遍历模块

    进程 什么是进程? 通俗的来讲,进程就是一个运行中的程序,最少包含一个虚拟空间,通常是 4 GB大小,一组提供数据和代码的模块,通产是 dll 和 exe 文件,一个进程内核对象和最少一个线程. 进程 ...

  5. 15Ajax、JSON

    15Ajax.JSON-2018/07/27 1. ThreadLocal 总结:调用该类的get方法,永远返回当前线程放入的数据.线程局部变量. 保证线程安全 (第二阶段day14后半部分视频以及1 ...

  6. Sturts2中Action的搜索顺序

    http://localhost:8080/ProjectName/path1/path2/path3/XX.action 首先会判断以/path1/paht2/path3为namespace的pac ...

  7. CentOS7 安装 PHP7.2

    点击查看原文 安装源 安装 EPEL 软件包: $ sudo yum install epel-release 安装 remi 源: $ sudo yum install http://rpms.re ...

  8. java 十四周总结

  9. Network----轮询

    轮询: 定时每隔多长时间刷新一次,但是,7X24的对服务器的压力会过大,因为在夜间或者是流量低峰期时,他还要持续工作. 客户端发一次请求,服务器就要相应一次. 长轮询: 和轮询的模式不同,长轮询是一次 ...

  10. 热词解析(9) — hangry

    今天给大家介绍一个非常有趣.又超级实用的词!!中文叫"饿极而怒",英文叫... 不知道你有没有这样的经历,当你饿着肚子等着你妈做饭,结果你妈却在麻将桌上不下来,你就越来越饿,越饿越 ...