jQuery学习(二)

kevin_wanwei

浏览: 114634 次
性别:
来自: 上海

最近访客更多访客>>

huzhiren

zxp209

kacyqian

yanjiaxin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery CSS JavaScript Ajax HTML

jQuery是个非常好的ajax框架。下面是由jQuery实现的可编辑的表格。

实现原理：就是在要单击<td></td>中插入<input type="text"/>，并让的边框设置为0，宽度、背景色和td的宽度一致。

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-color:#3e6a5f;
}

/*指页面上文档内容装载完成以后执行的方法*/
//$(document).ready(function(){
//});
//上面的方法等价于
$(function(){
	//标签选择器 odd表示奇数，even表示偶数
	//选择tbody中所有偶数行tr元素找出来
	$("tbody tr:even").css("background-color","#ECE9D8");
	//$("tbody td:even").css("background-color","white");
	var numId=$("tbody td:even");
	numId.click(function(){
		//创建一个文本框
		var inputobj=$("<input type='text'>");
		inputobj.css("border-width","0");
		var tdobj=$(this);
		//查看td 中是否含有input元素，如果有就不执行click事件
		if(tdobj.children("input").length>0){
			return false;
		}
		inputobj.css("font-size",tdobj.css("font-size"));
		inputobj.css("background-color",tdobj.css("background-color"));
		inputobj.width(tdobj.width());
		//将html值设进input text中
		var text=tdobj.html();
		inputobj.val(text);
		//inputobj.get(0).select();

	
		//将td中内容清空
		tdobj.html("");
		//将input 添加到td中
		inputobj.appendTo(tdobj);
		//触发 input JavaScript focus 事件和select事件
		inputobj.trigger("focus").trigger("select");
//		inputobj.click(function(){
//			return false;
//		});
	//input 键盘事件
		inputobj.keyup(function(event){
			var keycode=event.which;
			//13表示键盘上的回车键
			if(keycode==13){
				var inputtext=$(this).val();
				tdobj.html(inputtext);
			}
			//27表示键盘上的esc键
			if(keycode==27){
				tdobj.html(text);
			}
		});
	});
	
});

<html>
	<head>
		<title>JQuery实例2:可以编辑表格</title>
		<link type="text/css" rel="stylesheet" href="css/editTable.css"></link>
		<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
		<script type="text/javascript" src="js/editTable.js"></script>
	<head>
	<body>
		<table>
			<thead>
				<tr>
					<th colspan="2">点击鼠标可以编辑表格</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>学号</th>
					<th>姓名</th>
				</tr>
				<tr>
					<td>0001</td>
					<td>张三</td>
				</tr>
				<tr>
					<td>0002</td>
					<td>李四</td>
				</tr>
				<tr>
					<td>0003</td>
					<td>王五</td>
				</tr>
				<tr>
					<td>0004</td>
					<td>小姜</td>
				</tr>
			</tbody>
		</table>

	</body>
</html>

分享到：