php 实现可编辑表格,jQuery_jquery学习笔记二 实现可编辑的表格，实现可编辑的表格demo： 实例 - phpStudy...

jquery学习笔记二 实现可编辑的表格

实现可编辑的表格demo：

实例图：

代码：

复制代码 代码如下:

//简化的ready写法:页面加载完成时候调用

$(function() {

//将tbody内的偶数tr的背景颜色设置为#ECE9D8

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

//将tbody内的偶数td设置为numTd

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

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

numTd.click(function() {

//取点击到元素的jquery对象

var tdObj = $(this);

//如果点击的元素包含input控件则不执行click处理

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

return false;

}

//取td内容附值到text

var text = tdObj.html();

//清空td中的内容

tdObj.html("");

//创建一个文本框，去掉文本框的边框，设置文本框中的文字字体大小是16px

//使文本框的宽度和td的宽度相同，设置文本框的背景色，需要将当前td中的内容放到文本框中

//将文本框插入到td中

var inputObj = $("").css("border-width", "0")

.css("font-size", "16px").width(tdObj.width())

.css("background-color", tdObj.css("background-color"))

.val(text).appendTo(tdObj);

//设置触发器先触发focus事件再触发select事件

inputObj.trigger("focus").trigger("select");

//是文本框插入之后就被选中

inputObj.click(function() {

return false;

});

//注册keyup事件

inputObj.keyup(function(event) {

//获取当前按下键盘的键值

var keycode = event.which;

//处理回车的情况

if (keycode == 13) {

//获取当当前文本框中的内容

var inputtext = $(this).val();

//将td的内容修改成文本框中的内容

tdObj.html(inputtext);

}

//处理esc的情况

if (keycode == 27) {

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

tdObj.html(text);

}

});

});

});

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;

}

鼠标点击表格项就可以编辑

学号

姓名

000001

张三

000002

李四

000003

王五

000004

赵六

知识点：

1.$(function() {})是$(document).ready(function() {})的简写。

2.$("tbody td:even")中“：”表示过滤，even为偶数函数，筛选条件可以在帮助文档的选择器中查找。此句表示返回tbody内的偶数td，结果为集合。

3.在事件中$(this)将返回此控件的jquery对象。

4.children("input")表示取所有子元素包含input的jquery对象，结果为集合。

5.css("border-width", "0")表示设置css属性的值。

6.trigger("focus").trigger("select")表示设置事件先触发focus，再触发select。

7.keyup(function(event) {var keycode = event.which;})表示注册键盘事件，参数event的which属性存储键盘信息。 相关阅读:

CSS幻灯片教程:制作高效可维护组件化的CSS代码

sql中varchar和nvarchar的区别与使用方法

MSSQL 检查所使用的语句是否符合标准

ADOX.Catalog中文帮助详细说明chm文档

AJAX防止页面缓存的代码

网页设计技巧：CSS布局调试的有效方法

CSS教程：行高line-height属性(2)

php一些公用函数的集合

zblog不显示表情的解决方法

php文档更新介绍

Oracle常见问题及解决方案

去除链接元素的虚线框 兼容IE7、IE6、FF

.Net里漂浮窗口拖动的实现方法

一种让页面完全把过来显示的脚本代码