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。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。