注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

JQuery可编辑表格小结  

2010-11-23 21:10:02|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

2010/11/23

页面说明:

JQuery源代码:jquery.jsCSS样式:style.css;可编辑表格的JStable.jsjsp页面:index.jsp

Jsp页面代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>JQuery + Demo</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="table.js"></script>

  </head>

 

  <body>

   <br/>

   <br/>

   <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>

  </body>

</html>

CSS样式源代码:

TABLE {

    border: 1px solid black;

    /**修正边框不能合并*/

    border-collapse: collapse;

    width: 400px;

}

TABLE TD {

    border: 1px solid black;

    cursor: hand;

    width: 50%

}

TABLE TH{

    border: 1px solid black;

    width: 50%

}

TBODY TH{

    background-color: blue;

}

可编辑表格JS源代码:

/**

 *首先通过js来解决内容部分奇偶行的背景色不同

 *页面启动时加载:

 * $(document).ready(function(){});

 */

//简便写法

$(function()

{

    //找到表格内容区域的所有奇数行

    //使用even是为了通过tbody tr 返回所有的tr元素,

    //在数组下标是偶数的元素返回,因为这些元素,

    //实际上才是我们期望的tbody里面的奇数行

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

    //首先找到所有的编号单元格

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

    var aryTd = $('tbody td:even');

    //给这些单元格注册鼠标点击事件

    aryTd.click(

        function()

        {

            /*一般写法

            //找到当前鼠标点击的Td,this,就是对应相应clicktd

            var tdObj = $(this);

            //创建一个文本框(创建一个节点)

            var inputObj = $('<input type=text />');

            //去掉文本框的边框

            inputObj.css('border-width', '0');

            //设置文本框中文字的大小

            inputObj.css('font-size','15px');

            //是文本框的宽度和td的宽度相同

            inputObj.width(tdObj.width());

            //设置文本框的背景色

            inputObj.css('background-color', tdObj.css('background-color'));

            //插入之前需要将当前td中的内容放置到文本框

            inputObj.val(tdObj.html());

            //清空td中的内容

            tdObj.html('');

            //插入一个文本框到td

            inputObj.appendTo(tdObj);

            */

            /*精简写法*/

            //找到当前鼠标点击的Td,this,就是对应相应clicktd

            var tdObj = $(this);

            /**虽然点击input不会错,但单击td还是会出差bug

             * 解决方法:判断td中是否有input*/

            if(tdObj.children('input').length > 0)

            {

                return false;

            }

            //td中的文本内容:

            var text = tdObj.html();

            //清空td中的内容

            tdObj.html('');

            /**

             * 1、创建一个文本框(创建一个节点)

             * 2、去掉文本框的边框

             * 3、设置文本框中文字的大小

             * 4、文本框的宽度和td的宽度相同

             * 5、设置文本框的背景色

             * 6、插入之前需要将当前td中的内容放置到文本框

             * 7、插入一个文本框到td

             */

            var inputObj = $('<input type=text />')

                .css('border-width', '0')

                .css('font-size',tdObj.css('font-size'))

                .width(tdObj.width())

                .css('background-color', tdObj.css('background-color'))

                .val(text)

                .appendTo(tdObj);

            //使文本框选中get(0)实际的DOM 元素,但此时在苹果浏览器中不能选中

            //inputObj.get(0).select();

            /**原因:先获得焦点,后选中

             * 解决方法:用JQuery的返回值:事件处理*/

            inputObj.trigger('focus').trigger('select');

            //再次点击文本框,会有bug,是因为文本框属于TD,因此屏蔽文本框的click事件

            inputObj.click(

                function()

                {

                    //返回false,停止传播

                    return false;

                }

            );

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

            inputObj.keyup(

                function(event)

                {

                    //获得键值

                    var keyCode = event.which;

                    //处理回车

                    if(13 == keyCode)

                    {

                        //获取当前文本框中的内容

                        var inputText = $(this).val();

                        tdObj.html(inputText);

                    }

                    //处理esc的情况

                    if(27 == keyCode)

                    {

                        //td中的内容还原

                        tdObj.html(text);

                    }

                }

            );

            //处理文本框失去焦点

            inputObj.blur(

                function()

                {

                    //获取当前文本框中的内容

                    var inputText = $(this).val();

                    tdObj.html(inputText);

                }

            );

            //清除td下的文本框

            tdObj.remove('input');

        }

    );

   

});

 

小结:

 

1.  table中可以包含theadtbody

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节点

10.              CSS方法可以用于设置或获取节点的CSS属性,参数名是css的属性名

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

12.              tet方法可以获得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.              appendTo方法将一个节点追加到另一个节点所有子节点的后面

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

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

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

26.              JQueryevent对象上有一个which的属性可以获取键盘按键的键值

27.              13表示回车,27表示ESC

 

  评论这张
 
阅读(1420)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017