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

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

首先来看一下其效果：（网页效果：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. zencart,分类,所有,显示

    改的文件:includes/classes/category_tree.php,最简单的修改 if (!isset($first_element)) {        $first_element = ...

  2. （转）淘淘商城系列——使用Spring来管理Redis单机版和集群版

    http://blog.csdn.net/yerenyuan_pku/article/details/72863323 我们知道Jedis在处理Redis的单机版和集群版时是完全不同的,有可能在开发的 ...

  3. HDU_1176_免费馅饼_16.4.23再做

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1176 免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    M ...

  4. CAD使用GetxDataLong读数据（网页版）

    主要用到函数说明: MxDrawEntity::GetxDataLong2 读取一个Long扩展数据,详细说明如下: 参数 说明 [in] LONG lItem 该值所在位置 [out, retval ...

  5. IMDB电影排行爬取分析

    一.打开IMDB电影T250排行可以看见250条电影数据,电影名,评分等数据都可以看见 按F12进入开发者模式,找到这些数据对应的HTML网页结构,如下所示 可以看见里面有链接,点击链接可以进入电影详 ...

  6. xmpp聊天室(5)

    聊天室 //初始化聊天室 XMPPJID *roomJID = [XMPPJID jidWithString:ROOM_JID]; xmppRoom = [[XMPPRoom alloc] initW ...

  7. 09js、MySQL相关

    09js.MySQL相关-2018/07/19 1.js的dom 理解一下文档对象模型:html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改;在dom树当中 一切皆 ...

  8. 迷宫自动生成以及基于DFS的自动寻路算法

    直接贴代码 #include<ctime> #include<conio.h> #include<iostream> #include<windows.h&g ...

  9. 解决idea控制台打印乱码问题

    idea控制台打印乱码,用起来总别扭,也是在网上搜索了一番,靠一点猜测解决了. 首先打开你自己的idea的安装目录下(即右键桌面图标,点击打开文件所在位置),然后找到idea.exe.vmoption ...

  10. 配置JSTL

    1.去到官网下载好 4个包 http://tomcat.apache.org/download-taglibs.cgi 2.然后拷贝到 lib目录下 3.导入进去  后面的 C 代替了导入包的名字 4 ...