版权声明：欢迎转载，请注明出处 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. python 当pip不能用的时候可以去找python安装包

    初学python,一直pip安装各种包,突然间有一天pip莫名其妙不能用了,除了pip help全部都是没反应 百度好像没人出现过pip挂掉的情况 花了一小时修复pip,卸载啊,路径啊,全部无效 百度 ...

  2. LightOj 1215 Finding LCM

    Discription LCM is an abbreviation used for Least Common Multiple in Mathematics. We say LCM (a, b, ...

  3. Extjs grid增加或删除列后记住滚动条的位置

    IE下验证好使. { text: "Del", icon: 'Scripts/Ext/resources/images/icons/application_form_delete. ...

  4. ARM 浮点运算

    转载: http://www.embedu.org/Column/Column821.htm http://blog.sina.com.cn/s/blog_602f87700100r5xe.html ...

  5. cookie读取设置name

    cookie就是k-v形式,可以理解为一个hashmap cookie就是k-v形式,可以理解为一个hashmap cookie就是k-v形式,可以理解为一个hashmap 建立一个无生命周期的coo ...

  6. android特效集合

    https://github.com/Trinea/android-open-project http://www.cnblogs.com/hawkon/p/3593709.html http://i ...

  7. mac 当前位置打开终端

    做开发时经常会遇到在当前目录打开终端的情况,一直都是先启动终端,然后再切换到当前目录,今天发现了一个新的方法,虽然不是一步到位,但比以前快多了.   工具/原料   mac系统 苹果电脑 方法/步骤 ...

  8. CD_Lulu软件著作权中软件分类号

    计算机软件著作权 登记中使用的软件分类编码指南 一.计算机软件著作权登记中使用的软件分类编码的结构采用组合代码结构,由9位数字组成并按照从左至右的顺序排列,前5位数字代表计算机软件分的代码:后4位数字 ...

  9. 如何直接打开使用locate等查找到的文件

    很多的时候需要使用locate去定位文件,找到了文件之后接下来就是使用相应的文本编辑工具如gvim进行打开. 这个时候最烦心的就是去复制一大长串的地址了. 如果能让定位和打开一体操作就最好了,这就需要 ...

  10. hdu1034 简单模拟

    这里开一个二维数组.num[105][2];   我也不知道N有多少,随便开的,  那么这里num[i][0] 表示当前 第 i 个人拥有的糖果数,num[i][1]表示他上面一个人分给他的糖果数.详 ...