以下是一个简单的用jquery实现可编辑的表格
其js代码为
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>可编辑的表格</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/edit.js"></script>
</head>
<body>
<table border="1px">
<tbody>
<tr>
<td>123</td>
<td>456</td>
</tr>
</tbody>
</table>
</body>
</html>
其js代码为
$(document).ready(function(){
var tds = $("td");
tds.click(tdclick);
});
function tdclick(){
var td = $(this); //获得被点击的td所返回的jquery对象
var tdvalue = td.text(); //获得td的文本
td.html(""); //然后将td置空
var input = $("<input>"); //添加一个input标签
input.attr("value", tdvalue); //设置其属性value的值
input.keyup(function(event){ //为其注册键盘监听事件
var myevent = event || window.event;
var keycode = myevent.keyCode;
if(keycode == 13){
var inputNode = $(this);
var inputvalue = inputNode.val();
var tdNode = inputNode.parent(); //得到其父节点
tdNode.html(inputvalue);
tdNode.click(tdclick); //注册鼠标点击事件
}
});
td.append(input);
var inputdom = input.get(0);
inputdom.select(); //让文本框里的文字选中
td.unbind("click");
}