jQuery技术

可以编辑的表格

字号+ 作者:H5之家 来源:H5之家 2017-05-04 11:02 我要评论( )

今天学习了利用jQuery实现可以编辑的表 26684;这个例子。这个例子需求是这样的:在前台的表 26684;中单击单元 26684;便可修改其中的内容,回车键保存修改的内容

> web前端 > JavaScript > 正文 jQuery——可以编辑的表格 2014-05-25         来源:jQuery——可以编辑的表格      我要投稿

今天学习了利用jQuery实现可以编辑的表格这个例子。这个例子需求是这样的:在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容。原理:单击客户端表格单元格时,在单元格中添加一个文本框,并将单元格中原来的内容赋值给文本框,再进一步去修改文本框内容,修改后将文本框内容重新赋值给单元格。

源码:

前台代码:

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 = $("").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行$("")

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;

源码地址:

点击复制链接 与好友分享!回本站首页

相关TAG标签 表格

上一篇:Query意图分析:记一次完整的机器学习过程(scikit learn library学习笔记) 下一篇:android--WebView使用addJavascriptInterface在sdk 17的问题解决 相关文章

javascript学习笔记(十)表格隔行换色

javascript学习笔记(十一)对表格进行

JavaScript实现表格排序

动态创建表格,删除行列

jQuery对表单、表格的操作及更多的应用

使用jQuery5分钟快速搞定双色表格

jquery 表格的增加删除和修改及设置奇

JQuery表格内容过滤

一行js代码!实现一个简洁表格

jquery表格排序

图文推荐

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 徐州哪里有卖鸿雁牌强力

    徐州哪里有卖鸿雁牌强力

    2017-04-08 09:02

  • jQuery学习之:jqGrid表格插件

    jQuery学习之:jqGrid表格插件

    2017-04-04 18:01

  • JQuery学习笔记(二)——可编辑的表格

    JQuery学习笔记(二)——可编辑的表格

    2017-04-02 18:00

  • 基于jQuery的表格操作插件

    基于jQuery的表格操作插件

    2017-04-02 16:07

网友点评
D