AJAX学习笔记05

 

AJAX学习笔记05

学习课程：

学习内容	相关文件
实现可编辑的表格	jquery-editTable.jsp jquery.js jquery-editTable.js jquery-editTable.css

实现效果：

点击单元格，单元格会变成一个文本输入框，文本框中初始的内容为单元格中的内容，并且这些内容处于被选择状态下 可以在单元格中输入文本内容， 单击回车，文本中的内容会转换到单元格中的内容 想要修改成原来的内容可以按下ESC键

三个文件的代码：

Jquery-editTable.jsp

<link rel="stylesheet" type="text/css"                                          href="css/jquery-editTable.css"> <script type="text/javascript" src="jslib/jquery.js" /> <script type="text/javascript" src="jslib/jquery-editTable.js" /> <table>      <tbody>      <tr>      <td>第一个单元格</td>      <td>第二个单元格</td>      </tr>      </tbody> </table>

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>标签就创建出文本框， //经过测试，input的type属性默认类型为text  var input = $("<input type='text'>"); //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(); }