13518219792
本文实例讲述了jQuery实现的可编辑表格。分享给大家供大家参考，具体如下：
成都创新互联公司专注于新都企业网站建设,成都响应式网站建设公司,成都商城网站开发。新都网站建设公司,为新都等地区提供建站服务。全流程定制网站建设，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务
!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN"
""
html
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
title可编辑表格/title
script
type
=
"text/javascript"
src="jquery-1.7.2.min.js"/script
style
type
=
"text/css"
body{
background:#c0c0c0;
}
#tab{
border-collapse:collapse;
}
#tab
td{
width:50px;
height:18px;
border:1px
solid;
text-align:center;
}
/style
script
type
=
"text/javascript"
$(function(){
var
tds
=
$("#tab
tr
td");
editeTable(tds);
});
function
editeTable(tds){
tds.click(function(){
var
td=$(this);
var
oldText=td.text();
var
input=$("input
type='text'
value='"+oldText+"'/");
td.html(input);
input.click(function(){
return
false;
});
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){
var
keyEvent=event
||
window.event;
var
key=keyEvent.keyCode;
var
input_blur=$(this);
switch(key)
{
case
13:
var
newText=input_blur.val();
td.html(newText);
changeCurrConAttrByTable(currTableId);
break;
case
27://按下esc键，取消修改，把文本框变成文本
td.html(oldText);
break;
}
});
});
};
/script
/head
body
table
id
=
"tab"
tr
td1/tdtd1/tdtd1/tdtd1/tdtd1/td
/tr
tr
td1/tdtd1/tdtd1/tdtd1/tdtd1/td
/tr
tr
td1/tdtd1/tdtd1/tdtd1/tdtd1/td
/tr
tr
td1/tdtd1/tdtd1/tdtd1/tdtd1/td
/tr
tr
td1/tdtd1/tdtd1/tdtd1/tdtd1/td
/tr
/table
/body
/html
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
这个比较容易，有2种方案：
1、双击事件后，隐藏表格td之间的内容，插入一个input / ，然后就可以编辑了。
2、双击事件后，讲当前表格td的contentEditable属性修改为true，当前 td 就可以编辑了。
如果你不理解 第2种方案，你可以测试这个代码:
div contentEditable="true"可编辑的，你可以在这里写字/div
------------------------------------------
谢谢，要设为最佳哦，^_*
大体的思路说一下：\x0d\x0a1、在table的某个单元格点击中，先取出该单元格的值，再将该值赋给一个input text，并将这个input text动态添加到这个单元格中，代码可以写成：\x0d\x0a var tdvalue=$(this).val();\x0d\x0a $(this).html("");\x0d\x0a2、当单元格失去焦点时，将文本框的值回填给单元格，代码写成：\x0d\x0a $(this).html($("tempinput").val());\x0d\x0a3、实际写代码时还要考虑临时加入的文本框的宽度要与单元格一致等内容。
