jQuery入门学习七：可编辑的表格

来源：互联网发布：两个表格相同数据合并编辑：程序博客网时间：2024/06/02 09:47

本文的内容基本来自itcast上的视频教程，所用示例也基本是那上面的例子

这个例子将实现一个很酷的功能，在一个表格中，双击它就可以使其由只读变为可编辑状态。其实想想也容易，无非就是下面这些步骤：

相应双击事件，找到鼠标点击的那个文本框
将文本框中的内容保存起来
将文本用输入框代替，并使输入框中的值为保存的内容
响应用户的键盘事件，当用户按回车时将输入框中的数据发到服务器上
接受服务器的返回值，分成功和失败两种情况处理

然而，用过JavaScript的人很快就会意识到，要实现这些功能，代码量会很大。好在咱们有高人相助，我们可以用jQuery来轻松地实现这些功能。

使用jQuery来实现可编辑表格的步骤如下：

首先，当然是创建一个表弟

<!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>  <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script> <mce:script type="text/javascript" src="jslib/jqueryedit.js" mce_src="jslib/jqueryedit.js"></mce:script></head><body>  <table border="1px"> <tbody> <tr> <td>123123</td> <td>456456</td> </tr> </tbody> </table></body></html>

编写js代码，来实现表单的可编辑化（这里没做与后台交互的部分）

//在页面装载时，让所有的td都拥有一个点击事件$(document).ready(function() { //找到所有的td节点 var tds = $("td"); //给所有的td节点增加点击事件 tds.click(tdclick);});//td被点击的事件function tdclick() { //0.保存当前的td节点 var td = $(this); //1.取出当前td中的文本内容保存起来 var text = td.text(); //2.清空td里面的内容 td.html(""); //也可以用td.empty(); //3.建立一个文本框，也就是input的元素节点 var input = $("<input>"); //4.设置文本框的值是保存起来的文本内容 input.attr("value", text); //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 intputext = inputnode.val(); //3.清空td里面的内容 var tdNode = inputnode.parent(); //4。将保存的文本框的内容填充到td中 tdNode.html(intputext); //5.让td重新拥有点击事件 tdNode.click(tdclick); } }); //5.将文本框加入到td中 td.append(input); //也可以用input.appendTo(td) //5.5让文本框里面的文字被高亮选中 //需要将jquery的对象转换成dom对象 var inputdom = input.get(0); inputdom.select(); //6.需要清除td上的点击事件 td.unbind("click");}