jquery学习笔记 实战2 可以编辑的表格

1.  首先,看一下代码.

1//需要首先通过Javascript来解决内容部分奇偶行的背景色不同
$(function(){
	//找到表格的内容区域中所有的偶数行
	$("tbody tr:even").css("background-color","#E3E9D8");
	
	//我们需要找到所有学号的单元格
	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.get(0).select();
		inputObj.trigger("focus").trigger("select");
		

		//处理文本框上回车和esc按键的操作
		inputObj.keyup(function(event){
			//获取当前按下键的键值
			var keycode=event.which;
			//处理回车的情况
			if(keycode==13){
				//获取当前文本框中的内容
				var inputtext=$(this).val();
				//将td中的内容修改为文本框的内容
				tdObj.html(inputtext);
			}
			//处理ESC的情况
			if(keycode==27){
				//将td中的内容还原成text
				tdObj.html(text);
			}
		});
	});
});

 2. 代码总结

     (1)

<table>
   <thead>
		<tr>
			<th colspan="2">鼠标点击表格项就可以编辑</th>
		</tr>
   </thead>
   <tbody>
		<tr>
			<th>学号</th>
			<th>姓名</th>
		</tr>
   </tbody>
</table>

  

   table中可以包含thead和tbody

   表头的内容可以放在thead和tbdoy的th标签中.

 

     (2)

 

table{
	border:1px solid black;
	/*修正单元格之间的边框不能合并*/
	border-collapse:collapse;
	width:400px;
}

    可以通过border-collapse:collapse这种方式 来使表格中的单元格的边框合并

    (3) 当th上有背景色时,这个th属于的tr上定义的背景色会无效

    (4) css()方法可以用于 设定获取 节点的css属性,参数名是css的属性名.

    (5) jquery的对象内容包含着选择器对应的 DOM节点,以数组形式保存.

    (6) get()方法可以获得jquery对象中包含的某一个dom节点

    (7) $()方法的参数 是一个DOM对象时,这个方法相当于把DOM对象转换为jquery对象

    (8) children() 方法可以获得某个节点的子节点，可以指定参数来限制子节点的内容.

    (9) 如果选择器返回的jquery对象中包含多个DOM节点，在这个对象上注册类似click这样的事件时,

         所有的DOM节点都会用于事件.

    (10) html()方法可以 设置或获取 节点的html内容.

 

if(keycode==13){
	//获取当前文本框中的内容
	var inputtext=$(this).val();
	//将td中的内容修改为文本框的内容
	tdObj.html(inputtext);
}

 

 

var text=tdObj.html();//获取节点的html内容
//清空td中的内容
tdObj.html("");

 

    (11) val()方法可以 设置或获取 节点的value值

    (12) $()方法的参数 如果是一段正确的html文本,则可以创建一个DOM节点，并包装成jquery对象.

 

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

    (13) width方法可以 设置或获取 某个节点的宽度.

 

var inputObj=$("<input type='text'>").css("border-width","0")
		.css("font-size","16px")
		.width(tdObj.width())

 

    (14) appendTo方法可以将一个节点追加到另一个节点所有子节点的后面

    (15) 阻止事件传递可以让当前节点的事件返回false

 

if(tdObj.children("input").length>0){
	//当前td中有input,不执行click处理
	return false;
}

    (16) safari浏览器 必须要先focus文本框 再 select选中文本内容。其他浏览器直接select就可以选中文本

    (17) trigger()方法可以触发某个javascript的事件方法

 

//使文本框插入之后就被选中
//inputObj.get(0).select();
inputObj.trigger("focus").trigger("select");

 

   (18) jquery中某个事件方法的参数 function上可以定义一个event的参数。jquery会屏蔽浏览器的event差异，

        传给我们一个可以的event对象。

   (19) jquery的event对象上有一个which属性可以获得键盘按键的值。

   (20) keycode=13 回车键  keycode=27 ESC键