今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的过程中会出现一些小bug.通过jQuery函数就能够一一解决.

以下看下HTML代码:

 

     
     	
     
		      
			       
				        
鼠标点击表各项就能够编辑
			       
						      
				      
			       
				        
学号
				        
姓名
			       
			       
				        
000001
				        
张三
			       
			       
				        
000002
				        
李四
			       
			       
				        
000003
				        
王五
			       
			       
				        
000004
				        
赵六
			       
					      
			     
	

   

    在table中能够包括thead和tbody标签,表头的内容放在th中.这样写的优点是能够通过标签选择器选择须要的内容,比方:tbody th{}

js代码:

 

//须要首先通过Javascript来解决内容部分的奇偶行的背景色不同$(function(){	//找到表格的内容区域中全部的奇数行		$("tbody tr:even").css("background-color","#ECE9D8");	//找到全部的学号单元格,保存起来	var numTd = $("tbody td:even");			numTd.click(function(){		 		var tdObj=$(this);		if(tdObj.children("input").length>0){			// 当前td中有input文本框，不运行click处理			return false;		}		var txt = tdObj.html();		 	//创建一个文本框		//去掉文本框边框		//设置文本框中字体为16px		//使文本框的宽度和td的宽度同样		//设置文本框背景色		//将当前td中的内容放到文本框中		var inputObj=$("").css("border-width","0")			.css("font-size","16px").width(tdObj.width())			.css("background-color",tdObj.css("background-color"))			.val(tdObj.html());				//将文本框插入到td中		tdObj.html("");		inputObj.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){				tdObj.html(txt);			}			});				 });	});

          在$ 函数中,通过$("tbody tr")能够返回tbody中全部tr节点,另外,$("tbody tr:even")能够返回tbody中全部索引值是偶数的tr节点.

在上面的代码中我们能够看到html方法,它能够设置或获取节点的html内容:

         tdObj.html(inputtext);  为设置节点内容

         var txt=tdObj.html();  为获取节点html内容

         var inputObj=$("<input type='text'>");

         在这里假设$()方法的參数是一般html文本就能够创建一个DOM节点,并包装成jQuery对象.而后面一连串的CSS代码是链式写法,因为jQuery大部分方法都会返回运行这种方法的jQuery对象,因此能够採用这个写法来编写给予jQuery的代码.

         在处理文本框上回车和ESC按键操作时,响应keyup事件,在jQuery中,某个事件方法的參数function上能够定义一个event的參数,jQuery会屏蔽浏览器的event差异,传给我们一个可用的event对象,这个event对象上有一个which属性能够获得键盘按键的键值.

CSS代码:

 

table{	border:1px solid black;	/*修正单元格之间的边框不能合并的问题*/	border-collapse:collapse;	width:400px;}table td{	border:1px solid black;	width:50%;}table th{	border:1px solid black;	width:50%;}tbody th{	background:#A38ae9;	}

         CSS 代码没有什么可说的了,这里用的是最简单的CSS样式并且代码量非常少.jQuery的强大才刚刚体会到,接下来的实战一定会更加easy,希望能学到很多其它的知识,添加代码量.