可编辑的表格：

屏幕剪辑的捕获时间: 2015/8/14 9:16

HTML代码为：

<!DOCTYPE html>

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

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <title>JQuery实例二：可编辑的表格</title>

    <link href="Edit.css"rel="stylesheet" />

    <scriptsrc="jquery.js"></script>

    <scriptsrc="edit.js"></script>

</head>

<body>

    <table >

        <thead >

            <tr >

                <thcolspan="2">鼠标点击表格项就可以编辑</th>

            </tr>

        </thead>

        <tbody >

            <tr>

                <th>学号</th>

                <th>姓名</th>

            </tr>

            <tr>

                <td>0001</td>

                <td>张三</td>

            </tr>

            <tr>

                <td>0002</td>

                <td>李四</td>

            </tr>

            <tr>

                <td>0003</td>

                <td>王五</td>

            </tr>

            <tr>

                <td>0004</td>

                <td>赵六</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

CSS代码为：

body {

}

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;

}

JS文件：

//首先需要通过JS来解决内容部分奇偶行的背景色不同

//$(document).ready(function () {

//});

$(function(){

    //找到表格内容中除了第一个tr外所有的奇数行

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

    //需要找到所有的学号单元格

    var numTd=$("tbody td:even");

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

    //numTd.click(function(){

    //    //创建一个文本框

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

    //    //去掉文本框的边框

    //    inputObj.css("border-width","0");

    //    //设置文本框汇总给的文字字体大小是16px；

    //    inputObj.css("font-size", "16px");

    //    //找到当前鼠标点击的td,this 对应的就是响应click的那个td

    //    var tdObj = $(this);

    //    //使文本框的宽度和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);

    //另外一种精简的写法

    numTd.click(function () {

        //找到当前鼠标低级的td，this对应的就是这个td

        var tdObj = $(this);

        if (tdObj.child("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) {

            }

        });

    });

});

知识点小结：

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

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

3、$("tbodytr:even")可以返回tbody中所有索引值是偶数的tr节点。

4、CSS方法可以用于设定或获取节点的CSS属性。

5、JQuery的对象包含着选择器对应的DOM节点，以数组形式保存。

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

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

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

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

10、trigger方法可以出发某个JS的事件发生。

总结：

学到的知识，必须要用一下，纸上得来终觉浅（视频也不行），绝知此事要躬行！

JQuery经典小例子——可编辑的表格的更多相关文章

  1. JQuery实战总结一 可编辑的表格

    JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...

  2. jQuery的小例子

    1.在html中插入子页面 <script type="text/javascript"> $(document).ready(function() { $(" ...

  3. JQuery实战--可以编辑的表格

    廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线.还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格 ...

  4. JQuery实战--能够编辑的表格

    廊坊下雪了.15年的第二场雪.比14的来的稍晚一些.停靠在11教门前的自行车.成了廊坊师范学院最漂亮的风景线.还记得以前学习css的时候.就以前接触过怎样编写设计一些表格和表单的样式,比如怎样设计表格 ...

  5. 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...

  6. 实战Jquery(二)--能够编辑的表格

    今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

  7. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  8. [Web 前端] Jquery实现可直接编辑的表格

    cp from :https://www.cnblogs.com/sjqq/p/6392001.html?utm_source=itdadao&utm_medium=referral 文实例讲 ...

  9. jquery ui中的dialog，官网上经典的例子

    jquery ui中的dialog,官网上经典的例子   jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这 ...

随机推荐

  1. javascript开发 ios和android app的简单介绍

    先看几个名词解释: nodejs ionic,Cordova,phoneGap,anjularjs react-native,reactjs nodeJs 的介绍参见这里,写的很好http://www ...

  2. jquery checkbox 限制多选的个数

    2015年11月6日 16:32:49 选中第四个的时候提示超过了3个, 点解alert框取消后, 将最后一个选中的checkbox取消选中 <script> $(document).re ...

  3. MPlayer-2016-bin-noConsole

    运行 Install-RMenu.cmd 添加右键播放功能 ; 往前0.05秒 大概10多个帧 ' 往后0.05秒 大概10多个帧 鼠标右键 快速定位 鼠标中键 退出 F1 缩小 F2 原始大小 F3 ...

  4. 允许FTP用户登录并禁止Shell登录的方法

    最近安装了vsftpd做FTP服务,发现系统用户的登录shell设置为/sbin/nologin,就无法使用FTP服务.网上资料说,vsftpd会为每个FTP登录用户去在/etc/shells中检查对 ...

  5. Lake Counting_深度搜索_递归

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 30414   Accepted: 15195 D ...

  6. oracle触发器 ORA-01722:invalid number 解决方法

    问题在于,远程库是nvarchar2类型,本地是number类型,同步的时候有问题. create or replace trigger tri_org_department after insert ...

  7. 【网络】VPN

    VPN: 来自百度百科 虚拟专用网络的功能是:在公用网络上建立专用网络,进行加密通讯.在企业网络中有广泛应用.VPN网关通过对数据包的加密和数据包目标地址的转换实现远程访问.VPN有多种分类方式,主要 ...

  8. sqlserver 解析Json字符串

    转自:https://www.simple-talk.com/sql/t-sql-programming/consuming-json-strings-in-sql-server/ http://ww ...

  9. 双栈排序（codevs 1170）

    题目描述 Description Tom最近在研究一个有趣的排序问题.如图所示,通过2个栈S1和S2,Tom希望借助以下4种操作实现将输入序列升序排序. 操作a 如果输入序列不为空,将第一个元素压入栈 ...

  10. poj2912(种类并查集+枚举)

    题目:http://poj.org/problem?id=2912 题意:n个人进行m轮剪刀石头布游戏(0<n<=500,0<=m<=2000),接下来m行形如x, y, ch ...