1.JS文件
//创建可编辑的表格
$(document).ready(function(){
$("tbody tr:even").css("background-color","#FAE9F3");
//找到所有的学号单元格
var numID=$("tbody td:even");
//给这些单元格注册鼠标点击事件
numID.click(function (){
//找到鼠标点击的td this鼠标响应了click的ID
var tdobj=$(this);
//查询td里是否有文本框
if(tdobj.children("input").length>0)
{
return false;
}
var text=tdobj.html();
//清空td中的内容
tdobj.html("");
//创建一个文本框
var inputobj=$("<input type='text'/>").css("border","0")
.width(tdobj.width())
.css("background-color",tdobj.css("background-color"))
.val(text).appendTo(tdobj);
//文本框插入后被选中
//inputobj.get(0).select();
inputobj.trigger("focus").trigger("select");
inputobj.click(function(){
return false;
});
//处理文本框上回车或esc按键的操作
inputobj.keyup(function(event){
//处理Enter键的情况
//获取当前的按键键值
var keyCode=event.witch;
if(keyCode == 13)
{
//获取当前文本框中的内容
var inputText=$(this).val();
//将td的内容修改成文本框的内容
tdobj.val(inputText);
}
//处理esc的情况
if(keyCode == 27)
{
tdobj.html(text);
}
});
//去掉文本框的边框
//inputobj.css("border","0");
//使文本框的宽度td的宽度一致
//inputobj.width(tdobj.width());
//将当前td中的内容放入文本框中
//inputobj.val(tdobj.html());
//设置文本框的背景色 取当前td的背景色
//inputobj.css("background-color",tdobj.css("background-color"));
//插入一个文本框
});
});
2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>可编辑的表格</title>
<link href="css/bj.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bj.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>