php表格的单元格可编辑器,jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】...

本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jquery表格可编辑修改表格里面的数值

$(function(){

$('table td').click(function(){

if(!$(this).is('.input')){

$(this).addClass('input').html('').find('input').focus().blur(function(){

$(this).parent().removeClass('input').html($(this).val() || 0);

});

}

}).hover(function(){

$(this).addClass('hover');

},function(){

$(this).removeClass('hover');

});

});

/* page styles */

body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}

table{border-collapse:collapse;}

td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;}

caption{margin:0 0 .5em;font-weight:bold;}

/*demo styles*/

table{width:500px;height:200px;margin-left:30px;}

td, th{font-size:1.2em;padding:2px;width:13%;}

th{background-color:#f4f4f4;}

caption{font-size:1.5em;}

table{float:left;margin:40px 40px 0 0;}

.demo{width:500px;margin:0 auto;}

/* input */

td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;padding:8px 0;text-align:center;width:60px;margin:-17px 0 0 4px;font-size:1.4em;}

td.input{ padding:0;position:relative;}

td.hover{background:#eee;}

foodautohouseholdfurniturekitchenbath

Mary190160401203070Tom34030453549Brad1018010852579Kate4080902515119

希望本文所述对大家jQuery程序设计有所帮助。