jquery 可编者的表格 _Web前端

jquery 可编辑的表格

1、EditTable.jsp 文件

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>可编辑的表格</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">

		<link rel="stylesheet" type="text/css" href="css/editTable.css">
		<script type="text/javascript" src="scripts/jquery-1.6.1.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				//用Jquery实现隔行换色 
				$("#table1 tbody tr:even").css("background", "#ECF5FF");
				
				$("#table1 tbody td:even").dblclick(function(){
					var inputObj = $("<input type='text'/>");
					var tdObj = $(this);
					//当前td中有input，不执行dblclick处理
					if(tdObj.children("input").length > 0){
						return false;
					}
					//获得td中的内容
					var text = tdObj.html();
					//将当前td中的内容放到文本框中
					inputObj.val(text);
					//使文本框的宽度和td的宽度相同
					inputObj.width(tdObj.width());
					//使文本框的高度和td的高度相同
					inputObj.height(tdObj.height());
					//设置文本框的边框为0
					inputObj.css("border-width","0px");
					//设置文本框中的文字大小是16px
					inputObj.css("font-size","18px");
					//设置文本框的背景色
					inputObj.css("background-color",tdObj.css("background-color"));
					//清空td中的内容
					tdObj.html("");
					//将文本框插入到td中
					tdObj.html(inputObj);
					//选中文本框
					inputObj.get(0).select();
					//双击文本框不触发td的双击事件
					inputObj.dblclick(function(){
						return false;
					});
					//处理文本框上回车和esc按键的操作
					inputObj.keyup(function(event){
						//获得键值
						var keyCode = event.which;
						//处理回车的情况
						if(keyCode == 13){
							tdObj.html($(this).val());
						}
						//处理esc的情况
						if(keyCode == 27){
							tdObj.html(text);
						}
					});
				});
			});
		</script>
	</head>

	<body>
		<table id="table1" border="1px" cellpadding="0px" cellspacing="0px">
			<thead>
				<tr>
					<td colspan="2" align="center">鼠标点击表格项就可以编辑</td>
				</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>

2、editTable.css 文件

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

1 楼 zhangpurple 2011-12-08

2 楼 zhoutong123a 2012-04-23

好东西，谢谢