JQuery应用二：可编辑的表格

最新推荐文章于 2021-08-24 20:40:18 发布

fsgsdfghdfh

最新推荐文章于 2021-08-24 20:40:18 发布

阅读量80

点赞数

分类专栏： JQuery 文章标签： jQuery CSS JavaScript HTML Cache ViewUI

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>JQuery动态编辑的表格</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		
		<link rel="stylesheet" type="text/css" href="css/editTable.css">
		<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
		
		<script language="javascript">
			$(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);
							tdObj.remove("input");
						}
					});
				});
			});
		</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>

editTable.css内容如下：

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;
}

fsgsdfghdfh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery应用二：可编辑的表格

&lt;html&gt; &lt;head&gt; &lt;title&gt;JQuery动态编辑的表格&lt;/title&gt; &lt;meta http-equiv="pragma" content="no-cache"&gt; &lt;meta http-equiv="cache-control" content="no
复制链接

扫一扫