jQuery实现可编辑表格 -

BradyZhu

浏览: 247668 次
性别:
来自: 上海

最近访客更多访客>>

yhtppp

Sonicery_D

mf1389004071

liuxiao723846

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2016-01 ( 34)
2015-12 ( 14)
2015-11 ( 14)
更多存档...

jQuery实现可编辑表格

在很多的网页中，这个可编辑表格在许多地方都是非常有用，配合上AJAX技术能够实现很好的用户体验，下面我

们就jQuery来说明一下可编辑表格的实现步骤

首先是HTML代码，非常简单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>可以编辑的表格</title>
    <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/Ajax/js/edit.js"></script>
  	<link rel="stylesheet" href="/Ajax/css/edit.css" type="text/css"></link>
  </head>
  
  <body>
    <table border="1px">
    	<tr>
    		<td>123123</td>    <td>456456</td>
    	</tr>
    </table>
  </body>
</html>

然后是js代码

$(function(){
	//找到所有的td节点
	$("td").click(tdclick);
});

function tdclick(){
	
		var td = $(this);
		//1.取出当前的文本内容并且保存起来
		var text = td.text();
		//2. 清除当前的td内容
		td.html("");//也可以用empty()方法
		//3.建立一个input标签
		var input = $("<input>");
		//4.设置文本框里面的值是改写后的内容
		input.attr("value",text);
		//4.5响应键盘事件，处理回车
		input.keyup(function(event){
			//1.判断是否回车按下
			//结局不同浏览器获取时间的差异
			var myEvent = event || window.event;
			var key = myEvent.keyCode;
			if(key == 13){
				var inputNode = $(this);
				//1.保存当前文本框的内容
				var inputText = inputNode.val();
				//2.清空td里面的内容
				inputNode.parent().html(inputText);
				
				td.click(tdclick);
			}
		});
		
		input.blur(function(){
			var inputNode = $(this);
			var inputText = inputNode.val();
			inputNode.parent().html(inputText);
			td.click(tdclick);
		});
		
		//5.把文本框就加入到td里面去
		td.append(input);
		//6.需要清除td上面的点击事件
		//6.5高亮数据

		td.unbind("click");
		//7.提取文本框里面的值
}

注释写的挺清楚了，这样就实现了可编辑的表格，用户按下回车或者点击一下别的地方就能实现数据的保存

分享到：