jQuery实现可编辑表格

最新推荐文章于 2021-08-21 08:36:52 发布

Mooa

最新推荐文章于 2021-08-21 08:36:52 发布

阅读量931

点赞数

分类专栏： jquery 文章标签： jquery 可编辑表格

本文链接：https://blog.csdn.net/llovedan/article/details/17336345

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

周末无事，看视频自学jquery,本周实现可编辑表格

1，html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>editTable</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
	<link type="text/css" rel="stylesheet" href="css/editTable.css" />
	<script type="text/javascript" src="js/jquery.min.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>000</td>
				<td>赵小</td>
			</tr>
			<tr>
				<td>001</td>
				<td>王小</td>
			</tr>
			<tr>
				<td>002</td>
				<td>李小</td>
			</tr>
			<tr>
				<td>003</td>
				<td>张小</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

2，css文件控制html样式

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:#A3BAE9;
}

3，js文件，包括用到的jquery.min.js文件和实现功能的js文件

$(function(){
	//找到表格内容区域中除第一个tr以外的所有奇数行
	$("tbody tr:even").css("background-color","#ECE9D8");
	var numId=$("tbody td:even");
	numId.click(function(){
		
		var tdObj=$(this);
		if(tdObj.children("input").length>0){
			return false;
		}
		var text=tdObj.html();
		tdObj.html("");
		var inputObj=$("<input type='text'>").css("border","0").css("font-size","16px").width(tdObj.width());
		inputObj.css("background-color",tdObj.css("background-color")).val(tdObj.html()).appendTo(tdObj);
		inputObj.val(text);
		inputObj.trigger("focus").trigger("select");//高亮
		inputObj.click(function(){
			return false;
		});
		//esc  enter
		inputObj.keyup(function(event){
			var keycode=event.which();
			if(keycode==13){
				var inputtext=$this.val();
				tdObj.html(inputtext);
			}
			if(keycode==27){
				tdOjb.html(text);
			}
			
		});
	});
	
	
});

4，感谢视频的上传者，感谢主讲老师。我会继续努力,变得更好。

5,下载地址：http://download.csdn.net/detail/handaoyaosi/6718453