23_实现可编辑的表格

最新推荐文章于 2023-04-11 17:25:12 发布

maqingbin8888

最新推荐文章于 2023-04-11 17:25:12 发布

阅读量1.1k

点赞数

分类专栏： ajax 文章标签： input function jquery stylesheet 浏览器 html

本文链接：https://blog.csdn.net/maqingbin8888/article/details/3860231

版权

ajax 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一html顨的代码的编写:JQueryEdit.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>itcast.cn的JQuery示例:可以编辑的表格</title> <script type="text/javascript" src="jslib/jquery.js" "></script> <script type="text/javascript" src="jslib/jqueryedit.js" "></script> <link type="text/css" rel="stylesheet" href="css/edit.css" /> </head> <body>  <table > <tbody> <tr> <td>123123</td> <td>456456</td> </tr> </tbody> </table> </body> </html>

2样式表的风格:edit.css

/*利用标签选择器*/ table,td{ border: 1px solid black; /*让边框1个像素,线的类型,线的颜色*/ border-collapse: collapse; /*让相邻的边框合并*/ }

javascript脚本的处理:jqueryedit.js的代码:

//在页面装载时,让所有的td都拥有一个点击事件 $(document).ready(function(){ //找到所有的td结点 var tds = $("td"); //首先要找到td的结点 //给所有的td结点增加点击事件 tds.click(tdclick); }); //td被点击的事件 function tdclick() { var clickfunction = this ;//表求当前的function //0.保存当前td的节点 var td = $(this) //1.取出当前td中的文本内容保存起来 var text = td.text(); //先找到td的结点,再找他的文本 //2.清空td里面的内容 td.html(""); //也可以用td.empty()来清空 //3.建立一个文本框,也就是input的元素节点 var input = $("<input>"); //没有标签号的是找节点,有标签号的是创建结点.然后拿jquery包装起来 input.attr("value", text); //设置属性的方法 //4.设置文本框的值是保存起来的文本内容 //4.5要让文本框能够响应键盘按下并弹起的事件,主要用于处理回车确认 input.keyup(function(event) { //0.获取当前用户按下的键值 //解决不同的浏览器获取事件对象的差异 var myEvent = event || window.event; var kcode = myEvent.keyCode; //取键值 //1.判断是否是回车按下 if (kcode == 13) { var inputnode = $(this); //2.保存当前文本框的内容 var inputext = inputnode.val(); //3.清空td里面内容 var tdNode = inputnode.parent(); //4.将保存的文本框中内容填充到td中去 tdNode.html(inputext); //5.让td重新拥有点击事件 tdNode.click(tdclick); } if(kcode == 27) { var inputNode = $(this); var inputText = text; inputNode.attr("value",text); } }); //5.把文本框加入到td中 td.append(input); //也可以用input.appendTo(td) //5.5让文本框里的文字被高亮选中 //需要将将jquery对象转换成dom对象 var inputdom = input.get(0);//这里只有一个input所以是get(0),若有第二个input则get(1),get方法返回的是input结点的dom对象 inputdom.select(); //这样就达到文本被高亮选中的结果 //6.需要清除td上的点击事件 td.unbind("click"); }

脚本端的总体思路 td事件

0.保存当前的td的结点

1.取出当前td中的内容保存起来

2.清空td里面的内容

3.建立一个文本框,也就是input

4.5.要让文本框能够响应键盘按下并弹起的事件

0.获取当前按下的键值

解决不同浏览器的事件差异

1.判断是否是回车键

对于文本框来说

1.保存当前文本框的内容

2.找到td的结点,并清空其内容

3.让文本框中的内容添到td中去

4.让td重新拥有点击事件

5把文本框加入到td中

5.5文本框中的文字高亮选中

6.需要清除td上的点击事件

*****

重新总结:

1.保存td中内容

2.清除td中的内容

3.构建input标签

4.保存input的值(可以用input.attr())

5.将input的文本插入td中去

***

针对input文本要做的事情

1.解决不同浏览器的事件:input.keyup(function(event){});

2事件取键值 myEvent.keyCode;

3.(1)取文本内容并保存.

(2)找到td的结点.

(3)把文本的内容加到td中去.

(4)为td加一个注册事件

----------------------------

html() :预留区域要填充 tdNode.html(inputText)

val() : 某个文本的值 inputNode.val();

text() : 某个结点的文本,tdNode.Text();

maqingbin8888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23_实现可编辑的表格

一html顨的代码的编写:JQueryEdit.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> itcast.cn的JQuery示例:可以编辑的表格
复制链接

扫一扫