问题仔细找,总会找到的。
<!DOCTYPE html>
<html>
<head>
<title>简单的可编辑表格</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
td {
border: 1px red solid;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/edit.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/edit.css"> -->
</head>
<body>
<table>
<tr>
<td>123</td>
<td>456</td>
</tr>
</table>
</body>
</html>
//当页面加载时执行此方法
$(document).ready(function(){
var tds = $("td");
//对所有的td注册点击事件
tds.click(tdclick);
});
function tdclick() {
var td = $(this);
//保存td中的文本数据
var text = td.text();
//清空td中的数据
td.text("");
//利用JQuery插入一个input标签
var input = $("<input>");
//设置input标签中的值
input.attr("value",text);
//给input注册键盘按下弹起事件
input.keyup(function(event){
//获取键盘按下的code值
var key = event.keyCode;
//判断是否是回车键
if (key == 13){
//获取input的value中值
var ntext = $("input").val();
//将input中的值赋给td
td.html(ntext);
//重新建立td点击事件
td.bind("click",tdclick);
}
});
//将input标签添加到td中
td.append(input);
//将input中的内容选中
input.get(0).select();
//取消td点击事件
td.unbind("click",tdclick);
}