JQuery经典小例子——可编辑的表格
可编辑的表格：
屏幕剪辑的捕获时间: 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经典小例子——可编辑的表格的更多相关文章
- JQuery实战总结一 可编辑的表格
JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...
- jQuery的小例子
1.在html中插入子页面 <script type="text/javascript"> $(document).ready(function() { $(" ...
- JQuery实战--可以编辑的表格
廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线.还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格 ...
- JQuery实战--能够编辑的表格
廊坊下雪了.15年的第二场雪.比14的来的稍晚一些.停靠在11教门前的自行车.成了廊坊师范学院最漂亮的风景线.还记得以前学习css的时候.就以前接触过怎样编写设计一些表格和表单的样式,比如怎样设计表格 ...
- 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...
- 实战Jquery(二)--能够编辑的表格
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- [Web 前端] Jquery实现可直接编辑的表格
cp from :https://www.cnblogs.com/sjqq/p/6392001.html?utm_source=itdadao&utm_medium=referral 文实例讲 ...
- jquery ui中的dialog，官网上经典的例子
jquery ui中的dialog,官网上经典的例子 jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这 ...
随机推荐
- nyoj_148_fibonacci数列(二)_矩阵快速幂
fibonacci数列(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 In the Fibonacci integer sequence, F0 = 0, F ...
- VC++ 判断当前系统为32位还是64位
尝试了在VC++环境下判断系统为32位还是64位的方法,亲测有效!提供的函数如下 BOOL IsWow64() { typedef BOOL (WINAPI *LPFN_ISWOW64PROCESS) ...
- zookeeper windows 入门安装和测试
一.序言 以下是我对zookeeper 的一些理解: zookeeper 作为一个服务注册信息存储的管理工具,好吧,这样说得很抽象,我们举个“栗子”. 栗子1号: 假设我是一家 ...
- 仿知乎程序 fragment的切换以及toolbar在不同页面下显示的menu不同
我们在看知乎的时候,你会发现,首页,发现,关注,收藏,草稿这五项,你在点击之后进入到相应页面之后,侧滑菜单还在,你左侧滑一下,这个侧滑菜单还在,而提问,左滑屏幕,这个页面就没有,有点像返 ...
- 【leetcode】Valid Sudoku (easy)
题目:就是判断已有的数字是否冲突无效,若无效返回flase 有效返回true 不要求sudo可解 用了char型的数字,并且空格用‘.'来表示的. 思路:只要分别判断横向 竖向 3*3小块中的数字是否 ...
- ios手势
iOS 手势操作:拖动.捏合.旋转.点按.长按.轻扫.自定义 大 中 小 1.UIGestureRecognizer 介绍 手势识别在 iOS 中非常重要,他极大地提高了移动设备的使用便捷性. i ...
- [Android Pro] Android 性能分析工具dumpsys的使用
reference to : http://www.open-open.com/lib/view/open1405061994872.html Android提供的dumpsys工具可以用于查看感兴趣 ...
- Redis内存管理（一）
Redis数据库的内存管理函数有关的文件为:zmalloc.h和zmalloc.c. Redis作者在编写内存管理模块时考虑到了查看系统内是否安装了TCMalloc或者Jemalloc模块,这两个是已 ...
- 大数运算(python2)
偶然又遇到了一道大数题,据说python大数运算好屌,试了一发,果然方便-1 a = int( raw_input() ); //注意这里是按行读入的,即每行只读一个数 b = int( raw_in ...
- Django搭建简易博客
Django简易博客,主要实现了以下功能 连接数据库 创建超级用户与后台管理 利用django-admin-bootstrap美化界面 template,view与动态URL 多说评论功能 Markd ...