JQuery——表格数据编辑

前一段时间看到师哥师姐们些的一个系统，非常牛的一个地方就是实时修改数据库，如果要添加一个人，或者添加一个一个表，直接修改页面就可以动态的创建表和删除表或者修改表，感觉超级的牛，最近学习完了BS，也算是学习到了师姐们系统中的一部分内容了，那就是表格的数据编辑。

大概的意思就是表哥的数据是可以修改的，从而让表哥不在只是一个显示的工具，还是一个编辑的工具，而且还是异步修改，也就是修改其中的一个信息，也只是更新着一个信息，而不改变其他的信息，从而也服务器减轻了负担。

Js代码

<span style="font-size:18px;">//首先通过JavaScript来解决奇偶行的背景色不同

//$(document).ready(function(){
//
//});

$(function(){
	//找出第一个tr外的基数行
	$("tbody tr:even").css("background-color","#ECE9D8")
	//找到学号的单元格
	var numTd = $("tbody td:even");

	//注册鼠标点击事件
	numTd.click(function(){

		//找到当前鼠标点击的td,this对应的就是响应了click的那个td
			var tdObj = $(this);
			if (tdObj.children("input").length > 0) {
				//当前td中input，不执行click处理
				return false;
			}
			var text = tdObj.html();
			//清空td中的内容
			tdObj.html("");
			//创建一个文本框
			//去掉文本框的边框
			//设置文本框中的文字字体大小是16px
			//使文本框的宽度和td的宽度相同
			//设置文本框的背景色
			//需要将当前td中的内容放到文本框中
			//将文本框插入到td中
			var inputObj = $("<input type='text'>").css("border-width","0")
				.css("font-size","16px").width(tdObj.width())
				.css("background-color",tdObj.css("background-color"))
				.val(text).appendTo(tdObj);
			//文本框插入之后就被选中
			inputObj.trigger("focus").trigger("select");
			inputObj.click(function(){
				return false;
			});

			//处理文本框上回车和Esc进行操作
			inputObj.keyup(function(event){
				//处理回车对象
				var keycode =event.which;
				if (keycode = 13){
					var inputtext = $(this).val();
					tdObj.html(inputtext);
				}
				//处理esc的情况
				if (keycode = 27){
					//将td内容还原
					tdObj.html(text);

				}
		});
	});
});
</span>

其实上边的一段代码还是非常的简单的，首先就是用JQuery封装好的方法CSS来设计背景色，然后用Even来把奇数行的颜色改变。然后注册鼠标点击事件，单击时获取表格中内容，然后创建一个文本框，把值写入文本框中。把表格中选中的单元格的内容清空，这样就实现了可编辑的效果。然后是文本框中ESC和回车键，用keycode来判断，如果为13（回车），把内容复制给表哥的单元格中，如果是27，返回原来的值。

伟大的JQuery，果然是让我们用尽量少的代码来实现更多的功能，比如果选择奇偶行，设置CSS，设置插入文本框，但是JavaScript确是基本，很可惜没能好好学习一下JQuery的原理，但是却收获了JQuey。