JQuery实现可直接编辑的表格

本文实例讲述了JQuery实现可直接编辑的表格。分享给大家供大家参考。具体分析如下：

功能：

创建一个表格，用户单击某个单元格后，可以直接修改单元格文本。
在编辑状态下，用户可按回车键确认修改，按ESC键撤销修改。

效果如下图：

思路：

当用户点击某个单元格后，立即向该单元格内插入一个文本框，将它的宽、高都设置成与单元格相的数值。用户确认输入后，清空该单元格内的所有HTML代码，然后把内容设置为用户刚刚输入的文本。

HTML代码：

<table align="center">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>001</td>
<td>dog</td>
</tr>
<tr>
<td>002</td>
<td>cat</td>
</tr>
<tr>
<td>003</td>
<td>pig</td>
</tr>
</table>

JavaScript代码:

$(function(){
$("td").click(function(event){
//td中已经有了input,则不需要响应点击事件
if($(this).children("input").length > 0)
return false;
var tdObj = $(this);
var preText = tdObj.html();
//得到当前文本内容
var inputObj = $("<input type='text' />");
//创建一个文本框元素
tdObj.html(""); //清空td中的所有元素
inputObj
.width(tdObj.width())
//设置文本框宽度与td相同
.height(tdObj.height())
.css({border:"0px",fontSize:"17px",font:"宋体"})
.val(preText)
.appendTo(tdObj)
//把创建的文本框插入到tdObj子节点的最后
.trigger("focus")
//用trigger方法触发事件
.trigger("select");
inputObj.keyup(function(event){
if(13 == event.which)
//用户按下回车
{
var text = $(this).val();
tdObj.html(text);
}
else if(27 == event.which)
//ESC键
{
tdObj.html(preText);
}
});
//已进入编辑状态后，不再处理click事件
inputObj.click(function(){
return false;
});
});
});

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

您可能感兴趣的文章:

• jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
• 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
• jquery学习笔记二 实现可编辑的表格
• jQuery EasyUI中对表格进行编辑的实现代码
• 基于PHP+Jquery制作的可编辑的表格的代码
• editable.js 基于jquery的表格的编辑插件
• jQuery(非HTML5)可编辑表格实现代码
• jQuery仿Excel表格编辑功能的实现代码
• 利用jQuery实现可以编辑的表格
• 基于JQuery制作可编辑的表格特效
• jQuery实现拖动调整表格单元格大小的代码实例
• JQuery动态添加和删除表格行的方法
• jquery实现表格本地排序的方法
• 原生JS和JQuery动态添加、删除表格行的方法
• JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
• JQuery实现可编辑的表格实例讲解（2）
• jQuery+PHP实现可编辑表格字段内容并实时保存