正文
jquery编辑,jquery编辑html标签内容
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
jQuery实现的可编辑表格完整实例
本文实例讲述了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程序设计有所帮助。
jquery 双击可编辑表格怎么做呢。
这个比较容易，有2种方案：
1、双击事件后，隐藏表格td之间的内容，插入一个input / ，然后就可以编辑了。
2、双击事件后，讲当前表格td的contentEditable属性修改为true，当前 td 就可以编辑了。
如果你不理解 第2种方案，你可以测试这个代码:
div contentEditable="true"可编辑的，你可以在这里写字/div
------------------------------------------
谢谢，要设为最佳哦，^_*
jquery 如何把table中的一行变成可编辑的？
大体的思路说一下：\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、实际写代码时还要考虑临时加入的文本框的宽度要与单元格一致等内容。
