JQuery动态编者的表格数据

JQuery动态编辑的表格数据

点击下载JQuery-1.4.2.js

<html>
	<head>
		<title>JQuery动态编辑的表格DATA</title>
		<!--<meta charset="utf-8">-->
		<link rel="stylesheet" type="text/css" href="editTable.css">
		<script type="text/javascript" src="jquery-1.4.2.js"></script>
		<script src = "editTable.js"></script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th colspan="2">可以编辑的表格</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>学号</th>
					<th>姓名</th>
				</tr>
				<tr>
					<td>000001</td>
					<td>张三</td>
				</tr>
				<tr>
					<td>000002</td>
					<td>李四</td>
				</tr>
				<tr>
					<td>000003</td>
					<td>王五</td>
				</tr>
				<tr>
					<td>000004</td>
					<td>赵六</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

$(document).ready(function(){
	//$("tbody td:even")得到表格左边的单元格。:even表示：匹配所有索引值为偶数的元素，从 0 开始计数
	$("tbody tr:even").css("background-color","#ECE9D8");
		var numId = $("tbody td:even");
		//所有的得到表格左边的单元格都注册了点击事件
		numId.click(function(){
			var tdObj = $(this);//获得当前td单元格对象
			//当前文本框里是否有input对象，children()表示：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
			if(tdObj.children("input").length>0){
				return false;
			}
			var inputObj = $("<input type='text'>");//创建文本对象封装成JQuery对象
			//html()：取得第一个匹配元素的html内容
			var text = tdObj.html();
			inputObj.val(text);//将单元格里面的内容赋值到创建的文本对象
			tdObj.html("");//将当前td单元格内容清空
			inputObj.width(tdObj.width());//设置文本框对象的宽度与单元格的宽度相同
			inputObj.css("border-width","0");//设置文本框的边框
			inputObj.css("font-size","16px");//设置文本框字体与单元格中的字体大小一样
			//设置文本框的背景色与单元格的背景色相同
			inputObj.css("background-color",tdObj.css("background-color"));
			inputObj.appendTo(tdObj);//将文本框追加到单元格中
			//inputObj是JQuery对象,get(0)获到的就是一个DOM对象即文本框（非JQuery对象）
			//inputObj.get(0).select();
			//trigger()：在每一个匹配的元素上触发某类事件。先触发focus后触发select事件
			inputObj.trigger("focus").trigger("select");
			//文本框的单击事件
			inputObj.click(function(){
				return false;
			});
			//处理文本框上的Enter和ESC事件
			inputObj.keyup(function(event){
			//获得当前所按下的键盘的键值
			var keyCode = event.which;
			if(keyCode == 13){//Enter
				var inputObjText = $(this).val();
				tdObj.html(inputObjText);
				tdObj.remove("input");
			}else if(keyCode == 27){//Esc
				tdObj.html(text);
				jAlert(text, '确认');
				tdObj.remove("input");
			}
		});
	});
});

table {
	border:1px solid black;
	/**
	 * border-collapse : separate | collapse
	 * 设置或检索表格的行和单元格的边是合并在一起(collapse没有边框)还是按照标准的HTML样式分开
	 **/
	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: #A3BAE9;
}

来自：I forgot.

1 楼 skyfen 2010-11-25

这么一般的效果，不值得下。

2 楼 Ueaner 2010-11-26

只提供了jQuery的下载包，你下了什么呀。

JQuery动态编者的表格数据

相关推荐