版权声明：欢迎转载，请注明出处 https://blog.csdn.net/suneqing/article/details/26856635

    今天学习了利用jQuery实现能够编辑的表格这个样例。这个样例需求是这样的：在前台的表格中单击单元格便可改动当中的内容，回车键保存改动的内容。esc撤销保存的内容。原理：单击client表格单元格时，在单元格中加入一个文本框，并将单元格中原来的内容赋值给文本框。再进一步去改动文本框内容，改动后将文本框内容又一次赋值给单元格。

源代码：

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html

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

<head runat="server">

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

    <title>jq2—能够编辑的表格</title>

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

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

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

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

</head>

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

					<td>张三</td>

				</tr>

				<tr>

					<td>000002</td>

					<td>李四</td>

				</tr>

				<tr>

					<td>000003</td>

					<td>王五</td>

				</tr>

				<tr>

					<td>000004</td>

					<td>赵六</td>

				</tr>

			</tbody>

		</table>

    </div>

    </form>

</body>

</html>

css代码：

body {

}

table {

    border:1px solid #000000;

    border-collapse:collapse;/*单元格边框合并*/

    width:400px;

}

    table td {

    border:1px solid #000000;

    width:50%;

}

    table th {

    border:1px solid #000000;

    width:50%;

    }

tbody th {

    background-color:#426fae;

}

jquery代码

$(function () {

    //找到表格中除了第一个tr以外的全部偶数行

    //使用even为了通过tbody tr返回全部tr元素

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

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

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

    //给单元格注冊鼠标点击事件

    numId.click(function () {

        //找到相应当前鼠标点击的td，this相应的就是响应了click的那个td

        var tdObj = $(this);

        //推断td中是否有文本框

        if (tdObj.children("input").length>0) {

            return false;

        }

        //获取表格中的内容

        var text = tdObj.html();

        //清空td中的内容

        tdObj.html("");

        //创建文本框

        //去掉文本框的边框

        //设置文本框中字体与表格中的文字大小同样。

//设置文本框的背景颜色与表格的背景颜色一样

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

        //并将td中值放入文本框中

        //将文本框插入到td中

        var inputObj = $("<input type='text'>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).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) {

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

                tdObj.html(text);

            }

        });

    });

});

总结：通过这一实例的学习能获得的知识点：

一、html方面

1.table中能够包括thead和tbody

2.表头的内容中能够放th中

3.table{}这样的写法称作标签选择器，能够对整个table产生影响。

4.table td{}这样的写法表示table中包括的全部td。

二、jquery方面

$()的括号里能够放4种不同的參数

1.參数直接放function,表示页面载入完成：比如上述样例中jquery代码中的第1行$(function(){})

2.參数能够是css类选择器。并被包装成一个jquery对象。比如：上述样例中jquery代码的第4行$(“tbody tr:even”)

3.參数假设是html文本，能够创建dom节点，并包装成jquery对象。比如：上述样例中jquery代码的第27行$("<input type='text'>")

4.參数能够是一个dom对象，这种方法相当于吧dom对象装换成jquery对象。上述样例中jquery代码的第11行var tdObj = $(this)

本样例中的jquery对象

1.jquery对象后面加css属性。能够设置节点的css属性。比如上述样例中jquery代码中的第4行$("tbody tr:even").css("background-color", "#ece9d8");

2.jquery对象内容中包括了选择器相应的dom节点，以数组保存。

3.jquery对象后面加html方法能够设置或获取节点的html内容。比如上述样例中jquery代码中的第17行var text = tdObj.html()

4.jquery对象后面加val方法。能够获取或设置节点的value值。比如上述样例中jquery代码中第41行var inputtext = $(this).val()

5.jquery对象后面加width方法,能够设置或获取某个节点的宽度。比如上述样例中jquery代码中第27行tdObj.width()

6.jquery对象后面加apppendTo方法能够将一个节点追加到还有一个节点全部子节点后面。比如上述样例中jquery代码中第27行appendTo(tdObj)

7.jquery对象后面加trigger方法能够出发某个js事件发生。比如上述样例中jquery代码中第29行inputObj.trigger("focus").trigger("select")

8.jquery对象后面加children方法能够获得某个节点的子节点，能够制定參数来限制子节点的内容。比如上述样例中jquery代码中第13行tdObj.children("input").length

9.假设选择器返回的jquery对象中包括多个dom节点，在这个对象上注冊相似click事件，全部dom节点都会用于此事件。比如上述样例中jquery代码中第9行numId.click；

源代码地址：http://download.csdn.net/detail/suneqing/7396107

jQuery——能够编辑的表格的更多相关文章

  1. JQuery经典小例子——可编辑的表格

    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...

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

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

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

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

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

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

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

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

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

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

  7. JQuery实现可直接编辑的表格

    本文实例讲述了JQuery实现可直接编辑的表格.分享给大家供大家参考.具体分析如下: 功能: 创建一个表格,用户单击某个单元格后,可以直接修改单元格文本.在编辑状态下,用户可按回车键确认修改,按ESC ...

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

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

  9. 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

随机推荐

  1. (41)C#异步编程

    VS2010是经常阻塞UI线程的应用程序之一.例如用vs2010打开一个包含数百个项目的解决方案,可以要等待很长时间(感觉像卡死),自从vs2012情况得到了改善,项目在后台进行了异步加载. 一.同步 ...

  2. Vijos——P1137 组合数

    https://vijos.org/p/1137 描述 组合公式 C=N!/(M!*(N-M)!). 问题是求 C 中不同的质因子的个数例如 N=7, M=4. C=7!/(3!*4!)=5040/( ...

  3. codevs——3344 迷宫

    3344 迷宫  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 小刚在迷宫内,他需要从A点出发,按顺序经过B, ...

  4. Ubuntu 16.04下使用Wine安装文件内容搜索工具Search and Replace

    说明: 1.使用的Wine版本是深度出品(Deepin),已经精简了很多没用的配置,使启动能非常快,占用资源小. 2.关于没有.wine文件夹的解决方法:在命令行上运行winecfg: 下载: (链接 ...

  5. PS 基础知识 渐变编辑器如何使用

    ps渐变编辑器在哪 [ 标签:渐变,ps 渐变,编辑器 ] _______志 敏 回答:3 人气:9 解决时间:2009-04-16 15:28 满意答案 你先点渐变工具 然后左上出现渐变条设置 如图 ...

  6. Name和:Name

    http://www.cnblogs.com/tianyutingxy/archive/2011/02/23/1962078.html http://www.tuicool.com/articles/ ...

  7. 绝不要在构造函数和析构过程中调用virtual函数

    下面是一个用来塑模股市交易的类: derived的类的构造函数被调用,但是首先得调用基类Transaction的构造函数,但是在后面还得调用virrual函数,这个时候子类的对象的构造还没有完成,那么 ...

  8. linux c语言 select函数使用方法

    linux c语言 select函数使用方法 表头文件 #i nclude<sys/time.h> #i nclude<sys/types.h> #i nclude<un ...

  9. D堆的实现

    实现上一篇博客(http://blog.csdn.net/buleriver/article/details/38469977)说的D堆.假设把mD设置成2.D堆就退化成二叉堆,也就是说.二叉堆是D堆 ...

  10. Logical Volume Manager (Linux)

    http://en.wikipedia.org/wiki/Logical_Volume_Manager_(Linux) Logical Volume Manager (Linux) From Wiki ...