【JQuery】可直接编辑的表格

【JQuery实战视频教程】

功能：创建一个表格，用户单击某个单元格后，可以直接修改单元格文本。

在编辑状态下，用户可按回车键确认修改，按ESC键撤销修改。

效果：

思路：

当用户点击某个单元格后，立即向该单元格内插入一个文本框，将它的宽、高都设置成与单元格相的数值。用户确认输入后，清空该单元格内的所有HTML代码，然后把内容设置为用户刚刚输入的文本。

HTML代码：

<table align="center"><tr><td>学号</td><td>姓名</td></tr><tr><td>001</td><td>dog</td></tr><tr><td>002</td><td>cat</td></tr><tr><td>003</td><td>pig</td></tr></table>

JavaScript代码:

$(function(){$("td").click(function(event){//td中已经有了input,则不需要响应点击事件if($(this).children("input").length > 0)return false;var tdObj = $(this);var preText = tdObj.html(); //得到当前文本内容var inputObj = $("<input type='text' />"); //创建一个文本框元素tdObj.html(""); //清空td中的所有元素inputObj.width(tdObj.width()) //设置文本框宽度与td相同.height(tdObj.height()).css({border:"0px",fontSize:"17px",font:"宋体"}).val(preText).appendTo(tdObj) //把创建的文本框插入到tdObj子节点的最后.trigger("focus") //用trigger方法触发事件.trigger("select");inputObj.keyup(function(event){if(13 == event.which) //用户按下回车{var text = $(this).val();tdObj.html(text);}else if(27 == event.which) //ESC键{tdObj.html(preText);}});//已进入编辑状态后，不再处理click事件inputObj.click(function(){return false;});});
});

转载于:https://www.cnblogs.com/whongfei/archive/2012/12/18/5247012.html

【JQuery】可直接编辑的表格相关推荐

使用jQuery和Pure.CSS创建一个可编辑的表格
使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素.在本教程中,我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格. 如果想看教程演示的话,请点击这里查看. 开始你要 ...
可编辑的表格：jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击"确定"按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击& ...
JQuery实例：可以编辑的表格
HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
单击单元格实现可编辑的表格(学号和姓名下)
单击单元格实现可编辑的表格(学号和姓名下) 编辑完成后按Enter确定,Esc取消 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
分享10个jQuery页面动态编辑插件
为什么80%的码农都做不了架构师?>>> 日期:2012-5-21 来源:GBin1.com 页面动态编辑插件可以非常方便的帮助用户编辑页面内容,但是实现的方式并不是那么简单 ...
html双击变成可编辑,jquery 实现双击编辑并保存
jquery 实现双击编辑并保存 Jesse 2013-12-11 19:47:00 1153 最近在做一个数据修改的例子,一个个点开修改很麻烦,于是就想到ecshop后台里的只需单击就以编辑了,在 ...
php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
jQuery控件简易日历表格
jQuery控件简易日历表格代码,jquery表格,jquery插件 ,jquery,日期,时间,日历表格,表格代码,jQuery控件简易日历表格代码是一款较为简单的显示日历的代码,兼容firefox ...
html table 转置,jQuery+CSS实现的table表格行列转置功能示例
本文实例讲述了jQuery+CSS实现的table表格行列转置功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery行列转置 table ...
html可编辑的表格
<!DOCTYPE html > <html > <head> <meta charset="utf-8" /> <title ...

【JQuery】可直接编辑的表格

【JQuery】可直接编辑的表格相关推荐

最新文章

热门文章