jQuery——能够编辑的表格
版权声明：欢迎转载，请注明出处 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；
jQuery——能够编辑的表格的更多相关文章
- JQuery经典小例子——可编辑的表格
可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...
- 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...
- JQuery实战--可以编辑的表格
廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线.还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格 ...
- JQuery实战总结一 可编辑的表格
JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...
- [Web 前端] Jquery实现可直接编辑的表格
cp from :https://www.cnblogs.com/sjqq/p/6392001.html?utm_source=itdadao&utm_medium=referral 文实例讲 ...
- JQuery实战--能够编辑的表格
廊坊下雪了.15年的第二场雪.比14的来的稍晚一些.停靠在11教门前的自行车.成了廊坊师范学院最漂亮的风景线.还记得以前学习css的时候.就以前接触过怎样编写设计一些表格和表单的样式,比如怎样设计表格 ...
- JQuery实现可直接编辑的表格
本文实例讲述了JQuery实现可直接编辑的表格.分享给大家供大家参考.具体分析如下: 功能: 创建一个表格,用户单击某个单元格后,可以直接修改单元格文本.在编辑状态下,用户可按回车键确认修改,按ESC ...
- 实战Jquery(二)--能够编辑的表格
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...
- 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细
阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...
随机推荐
- hdu 1195(搜索)
Open the Lock Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- hdu4635 有向图最多添加多少边使图仍非强连通
思路:先缩点成有向无环图,则必然含有出度为0的点/入度为0的点,因为要使添加的边尽量多,最多最多也就n*(n-1)条减去原来的m条边,这样是一个强连通图,问题转化为最少去掉几条,使图不强连通,原来图中 ...
- 海量端口扫描工具masscan
海量端口扫描工具masscan masscan号称是互联网上最快的端口扫描工具,可以6分钟扫描整个互联网,每秒可以发送一百万个数据包.为了提高处理速度,masscan定制了TCP/IP栈,从而不影 ...
- python生成器、迭代器、__call__、闭包简单说明
1.生成器 这种一边循环一边计算的机制,称为生成器:generator,最简单的方法是把生成式的[]改为(). >>> l=(x * x for x in range(1, 11) ...
- CDOJ_24 八球胜负
8球是一种台球竞赛的规则.台面上有7个红球.7个黄球以及一个黑球,当然还有一个白球.对于本题,我们使用如下的简化规则:红.黄两名选手轮 流用白球击打各自颜色的球,如果将该颜色的7个球全部打进,则这名选 ...
- proc_get_status() has been disabled for security reasons
找到php.ini搜索proc_get_status去掉即可.
- maven运行update命令时报org/apache/maven/shared/filtering/MavenFilteringException错误
在eclipse中对准项目运行maven->update project命令时报错:org/apache/maven/shared/filtering/MavenFiltering ...
- vdWebControl.js去水印
vdWebControl.js可以在浏览器中展示cad图形(须要使用其自家的转换工具把cad转换为vds格式.工具免费,但转换完成后的文件带水印信息),支持编辑图形. vdWebControl.js试 ...
- HEVC的參考队列解码
參考队列是指在进行帧间解码时.P或者B slice所參考的已解码的.位于解码图像缓存中(DPB, decoded picture buffer)中的图像队列,类似h264中的reflist0和refl ...
- 关于C++ 命名空间Namespace 的解析
使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突.在C++中,变量.函数和类都是大量存在的.如果没有命名空间,这些变量.函数.类的名称将都存在于全局命名空间中,会导致很多冲突.比如,如果我 ...