jQuery学习记录----可编辑的表格（六）

实现可编辑的表格，如某一单元格点击后变成输入框，输入完成后按回车，或失去焦点时又变为文本。其实现的基本思路是：

1、当点击某一单元格时，将此单元格的文字保存起来。

2、清除此文字。即单元格的文字。

3、生成一个文本框，将其值设为保存的文本值。

4、给该文本框添加事件，如按键，如失去焦点事件。

4.1、事件主要处理当按下某一特殊键如Enter或失去焦点时，将输入框的值重新存为单元格的值。

4.2、事件中还有一步非常重要，即再次调用单元格的单击事件。因为第----步已经对单元格释放了该事件。

5、将该文本框追加给单元格

6、给单元格取消单元事件。如不取消的话，生成的文本框也会有此单击事件，这样一来，等第二次单击文本框时里面的值就没有了。

现将JS代码贴出来：

$(document).ready(function(){
	
	var tds = $('td');
	tds.click(tdclick);
});

function tdclick(){
	var td = $(this);
	var text = td.text();
	td.html('');
	var input = $('<input>');
	//input.val(text);这样也可以实现
	input.attr('value',text);
	
	input.keyup(function (event){
		var myEvent = event||window.Event;
		var keyCode = myEvent.keyCode;
		//alert(keyCode)
		if (keyCode==13) {//判断是否为按下Enter
			var inputNode = $(this);
			var inputText = inputNode.val();
			td.html(inputText);
			td.click(tdclick);
		}
		else if(keyCode==27){//判断是否为按下Esc
			var inputNode = $(this);
			inputNode.attr('value',text);
		}
	});
	
	//文本框失去焦点时，重新变回文本，文本内容为输入框中的值
	input.blur(function(){
		td.html(input.val());
		td.click(tdclick);
	});
	
	
	td.append(input);
	var inputDom = input.get(0);//将jquery对象转化为DOM对象
	inputDom.select();
	td.unbind('click');//当出现文本框时再单出不需要再调用单击函数tdclick
}

 

此篇涉及的代码见附件。

评论

1 楼 javaliyuanyuan 2011-10-20  

晕，源码不能用