JQuery 实站第二讲：可编辑的表格

          在写这篇文章之前，首先向大家推荐两本书和一个Javascript开发工具。

          第一本书：《JQuery in Action》（中文版：Jquery 实战）这本书全面介绍jQuery知识，展示如何遍历HTML文档、处理事件、执行动画以及给网页添加Ajax。书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。《jQuery实战》适合各层次Web开发人员。

作者简介：

Bear Bibeault，著名Web技术专家。有30多年编程经验。也是技术社区JavaRanch的核心人物之一。除本书外，他还和其他世界级Web专家联袂打造了圣经级巨著《Ajax实战：实例详解》和《Ajax实战：Prototype与Scriptaculous篇》（均由人民邮电出版社出版）。
           Yehuda Katz，著名Web技术专家。jQuery插件开发团队领导人，Merb等开源项目核心开发人员。

第二本书：《悟透javascript》 (美绘本) 正是你所需要的！通过《悟透JavaScript》，您可以独辟蹊径学习、理解和运用JavaScript；通过《悟透JavaScript》(美绘本) ，您可以更轻松地编写动态网页；通过《悟透JavaScript》，您可以更深入地理解AJAX技术；通过《悟透JavaScript》，您可以在学习技术本身的同时，领悟到编程的境界；通过《悟透JavaScript》，您可以更多地享受到读书的快乐和程序的魅力！

         作者简介：李战，阿里软件的老顽童，混迹IT江湖多年。在数据库、Web架构、前端技术及数据库全文检索方面有身后内力！

        开发工具：1st JavaScript Editor Pro 5.1

　     1st JavaScript Editor 是一款强大的JavaScript开发、校验和调试工具，它简单易用，不论你是初学者或者是专业的开发人士，都可以轻松上手！同时它又是完美的Ajax (Asynchronous JavaScript and XML),CSS, HTML, DOM DHTML开发工具！

官方地址：http://yaldex.com/

       为什么要在这篇文章之前加上这些东西。您可能要骂了，Y的又一个书托？！上述内容的确是从售书网的摘要要粘过来的，但我不是一个托。也曾听书托介绍这两本书，元旦的时候去中关村图书大厦看了看，就爱不释手了。价格虽然贵了点，但决对是值得一看的两本书。建议先看《悟透javascript》 (美绘本)。它可以让你又以一种全新的思维去认识和理解javascript。看完之后在来阅读《JQuery in Action》（中文版：Jquery 实战）是一个不错的学习和巩固的过程。

   废话就不多说，现在进入正题。今天我们来学习王兴魁老师的JQuery实战第二讲：可编辑的表格。

  利用今天所学的知识，我们可以做一个自已的可编辑的表格插件。虽然现在这类可以显示又可以编辑的控件不少，包括GridView也不是很灵活，所以我们得学会自已来做一个类似功能的插件。

实现步骤：

 

 

      首先我们来实现第一步：建立文件EditTable.html

 

        

 

代码

< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < table >
             < thead >
                 < tr >
                     < th  colspan ="2" >
                        鼠标单击就可编辑
                     </ th >
                 </ tr >
             </ thead >
              < tbody >
                 < tr >
                     < th >  学号  </ th >
                     < th >  姓名 </ th >
                 </ tr >
                 < tr >
                     < td > 00001 </ td >
                     < td > 张三 </ td >
                 </ tr >
                 < tr >
                     < td > 00002 </ td >
                     < td > 李四 </ td >  
                 </ tr >
                 < tr >
                     < td > 00003  </ td >
                     < td > 王五 </ td >
                 </ tr >
                 < tr >
                     < td > 00004 </ td >            
                     < td > 赵六 </ td >
                 </ tr >
             </ tbody >
         </ table >
     </ div >
     </ form >
</ body >

 

          预览效果如图：

 

          但我们发现这个表格没有任何的边框，与我们最终的效果相差太远，下面我们能过css文件来实现表格的边框及最后的样式。在css文件夹下建立EditTable.css文件。

         

代码

/* 标签选择器，页面中的所有table标签都应用此样式 */

    table 
     {
        border : 1px solid black ;
         /* 修改单元格之间的边框不能合并的问题 */
        border-collapse : collapse ;
        width : 400px ;
     }
     /* table中包含的所有td */
    table td
     {
         /* td边框宽度 */
        border : 1px solid black ;
        width : 50% ;
     }
    table th
     {
        border : 1px solid black ;
        width : 50% ;
     }
    tbody th
     {
         /* th背景色 */
        background-color :  #A3BAE9 ;    
     }

 

           在html中引入css文件：

< link  rel ="stylesheet"  href ="Css/EditTable.css"  type ="text/css"  media ="screen"   />

           最终效果如下：

 

         下面我们来实一JQuery代码部分，在JQuery文件夹中简历EditTable.js文件。

        

代码

// 需要通过jquery解决背景色奇偶行颜色的不同
// 在页面的DOM装载完之后执行方法
// $(document).ready(function() {
// });
// 简化上述写法
$( function () {
     // 找到表格的内容区域中的所有奇数行
     // odd筛选奇数行
     // even 是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，
     // 因数数组中下标元素，实际上才是我们期望的tbody里的奇数行。
    $( " tbody tr:even " ).css( " background-color " ,  " #ECE9D8 " );
     // 找到学号的单元格
     var  numTD  =  $( " tbody td:even " )
     // 给这些单元格注册事件，不需要用循环jq会把所有的td的事件都注册上
    numTD.click( function () {
         //         //创建一个文本框
         //         var inputObj = $("<input type='text'/>");
         //         //去掉文本框的边框
         //         // inputObj.css("border-width", "0");
         //         //找到当前鼠标点击的td，this对应了的就是响应了click的那个td
         //         var objtd = $(this);
         //         //使文本框的宽度和知的宽度相同
         //         inputObj.width(objtd.width())
         //         //设置文本框中字体的大小是16px
         //         inputObj.css("font-size", "16px");
         //         //设置文本框的背景色
         //         inputObj.css("background-color", objtd.css("background-color"));
         //         //需要将当前td中的内容放到文本框中
         //         inputObj.val(objtd.html());
         //         //清空td中的内容
         //         objtd.html("");
         //         //将文本框插入到td中
         //         inputObj.appendTo(objtd);
         //         //默认选中 浏览器的兼容性可以使用下面的方法
         //         inputObj.get(0).select();
         //         //文本框属于td解决在文本框上点击时不将事件传回td中
         //         inputObj.click(function() {
         //             return false;
         //         });
         // 简化上述写法
         // 找到当前鼠标点击的td，this对应了的就是响应了click的那个td
     var  objtd  =  $( this );
         // 判断objtd中是否存在文本框控件
         if  (objtd.children( " input " ).length  >   0 ) { 
         // 当前td的input不执行click
             return   false;
        }
         // 需要将当前td中的内容放到文本框中
         var  text  =  objtd.html();
         // 清空td中的内容
        objtd.html( "" );
         // 创建一个文本框
         // 去掉文本框的边框
         // 使文本框的宽度和知的宽度相同
         // 设置文本框中字体的大小是16px
         // 设置文本框的背景色
         // 需要将当前td中的内容放到文本框中
         // 将文本框插入到td中
         var  inputObj  =  $( " <input type='text'/> " )
        .css( " border-width " ,  " 0 " )
        .css( " font-size " ,  " 16px " )
        .css( " background-color " , objtd.css( " background-color " ))
        .width(objtd.width())
        .val(text).appendTo(objtd);
         // 文本插入之后默认选中
        inputObj.get( 0 ).select();
         // 文本框属于td解决在文本框上点击时不将事件传回td中
        inputObj.click( function () {
             return   false ;
        });
         // 处理回车和esc的操作
        inputObj.keyup( function (event) {
             var  keycode  =  event.which;
             // 处理回车情况
             if  (keycode  ==   13 ) {
                 // 获取当前文本中的内容
                 var  inputtext  =  $( this ).val();
                 // 将td的内容修改为文本框中的内容
                objtd.html(inputtext);
            }
             // 处理esc情况
             if  (keycode  ==   27 ) {
                 // 将内容恢复成text中的内容
                objtd.html(text);
            }
        });
    });
});

 

 

本节主要知识点总结：

 

1、table中可以包含thead 和tbody

2、表头内容可以放到th中

3、table｛｝这种写法称作标签选择器，可以对整个页面的所有table产生影响

4、table td{}这样的写法表示的是table中包含的所有td

5、可以通过border-collapse：collapse这种方式来使表格中的单元格边框合并

6、当th有背景色时，这个th属于的tr上定义的背景色会无效

7、$(function(){});是$(document).ready(function(){});的简化写法

8、$("tbody tr")可以返回tbody中的所有tr节点

9、$("tbody tr:even")可以返回tbody中所有索引值是偶数的tr节点。odd匹配所有索引值为奇数的元素，从 0 开始计数

10、.css方法可以用于设定或获取css节点的css属性，参数名是css的属性名

11、JQuery的对象内容包含着选择器对应的DOM节点，以数组形式进行保存

12、get方法可以获取得JQuery对象中包含的某一个DOM节点

13、function中的this代表执行这个function的对象

14、$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象

15、children方法可以获得某个节点的子节点，可以制定参数限制子节点的内容

16、如果选择器返回的JQuery对象中包含多个DOM节点，在这个对象上注册类似click这样的事件时，所有的DOM节点都会用于该事件

17、html方法可以用于获取或设置节点的HTML内容

18、val方法可以获取或设置节点的value值

19、$()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成JQuery对象。

20、JQuery大部分方法都会返回执行这个方法的JQuery对象，因此可以采用链式方法的写法来编写JQuery代码

21、width方法可以设置或获取某个节点的宽度

22、appebdTo方法可以将一个节点追加到另一个节点的所有子节点的后面

23、阻止事件传递可以让当前节点的事件返回false

24、trigger方法可以触发某个javascript的事件发生。

25、JQuery中某个事件方法的参数活function上可以定义一个event参数。JQuery会屏蔽浏览器的event差异，传给我们一个可用的event对象

26、JQuery的event对象上有一个which的属性，用以获得键盘按键的值//本

27、13表示回车，27表示ESC

 

       本实例只是实现了简单的效果，如果要与数据库之间进行交互，还有待进一步的改进。在此不在傲述！

 

作者：mzoy(三木)
出处：http://www.cnblogs.com/mzoylee

出处：http://blog.csdn.net/mzoy

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。