AJAX学习笔记05

AJAX学习笔记05

学习课程：

学习内容

相关文件

实现可编辑的表格

jquery-editTable.jsp

jquery.js

jquery-editTable.js

jquery-editTable.css

实现效果：

点击单元格，单元格会变成一个文本输入框，文本框中初始的内容为单元格中的内容，并且这些内容处于被选择状态下

可以在单元格中输入文本内容，

单击回车，文本中的内容会转换到单元格中的内容

想要修改成原来的内容可以按下ESC键

三个文件的代码：

Jquery-editTable.jsp

jquery-editTable.css

@CHARSET "UTF-8"; table , td{  /*为表格加入边框，让相邻边框合并*/border-collapse: collapse;border: 1px solid black;  /*abcdef abcd0b abcd0a*/color: ab0d0a;}

jquery-editTable.js

//在页面加载时，让所有的td都拥有一个点击事件 $(document).ready( function(){//找到所有的td标签 var tds = $("td"); //为td标签添加单击事件 tds.click( tdClick );} );function tdClick(){//0.保存当前的td节点 var td = $( this );//1.取出当前td中的内容文本保存起来 var text = td.text();//2.清空td里面的内容 td.empty();//3.建立一个文本框，即一个input的元素节点 //为什么创建标签就创建出文本框， //经过测试，input的type属性默认类型为text  var input = $("");//4.设置文本框的值是保存起来的文本内容 //input.attr( "type" , "button"); input.attr( "value" , text );//4.5让文本框响应键盘事件 input.keyup( function( event ){//0.获取用户按下的键值 var keyEvent = event || window.event;var keyCode = keyEvent.keyCode;//1.判断是否按下回车 if ( keyCode == 13 ){//2.获取当前文本框的内容 var inputNode = $( this );//3.清空td里面的内容 td.empty();//4.将保存的文本框中的内容填充到td中 td.html( inputNode.val() ); //5.让td重新拥有点击事件 td.click( tdClick );}//扩展作业：按下ESC可以恢复操作 //ESC键的keyCode为27 if ( keyCode == 27 ){var inputNode = $( this );input.val( text );}});//5.将文本框中的内容加入到td中 td.append( input ); //input.appendTo( td ); //当td中的内容变成一个input的元素节点以后，不再响应onclick事件 //当td中的内容从input的元素节点变成文字信息时，再将onclick事件注册上去 //5.5将文本框中的文字被选中 //将JQuery对象转换为普通的DOM对象，才能调用select()方法 var inputDom = input.get( 0 );inputDom.select();//6.取消td上的点击事件 API，事件——unbind(); td.unbind();}

Ajax

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。