jQuery实现的可编辑表格完整实例
本文实例讲述了jQuery实现的可编辑表格。分享给大家供大家参考，具体如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>可编辑表格</title>
<scripttype="text/javascript"src="jquery-1.7.2.min.js"></script>
<styletype="text/css">
body{
background:#c0c0c0;
}
#tab{
border-collapse:collapse;
}
#tabtd{
width:50px;
height:18px;
border:1pxsolid;
text-align:center;
}
</style>
<scripttype="text/javascript">
$(function(){
vartds=$("#tabtrtd");
editeTable(tds);
});
functionediteTable(tds){
tds.click(function(){
vartd=$(this);
varoldText=td.text();
varinput=$("<inputtype='text'value='"+oldText+"'/>");
td.html(input);
input.click(function(){
returnfalse;
});
input.css("border-width","1px");
input.css("font-size","12px");
input.css("text-align","center");
input.css("width","0px");
input.width(td.width());
input.trigger("focus").trigger("select");
input.blur(function(){
td.html(oldText);
});
input.keyup(function(event){
varkeyEvent=event||window.event;
varkey=keyEvent.keyCode;
varinput_blur=$(this);
switch(key)
{
case13:
varnewText=input_blur.val();
td.html(newText);
changeCurrConAttrByTable(currTableId);
break;
case27://按下esc键，取消修改，把文本框变成文本
td.html(oldText);
break;
}
});
});
};
</script>
</head>
<body>
<tableid="tab">
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。