jQuery实现了一个可以直接编辑的表。

jQuery实现了一个可以直接编辑的表。
本文演示了可以由jQuery实现直接编辑的表:

功能

创建一个表,用户单击一个单元格后,单元格文本可以直接修改

在编辑状态下,用户可以根据返回键确认更改,并根据ESC键撤消修改。

效果如下:
思想:

当用户单击某个单元格时,立即将一个文本框插入该单元格,其宽度和高度设置为单元格的值。当用户确认输入时,它清除单元格中的所有HTML代码,然后将内容设置为用户刚刚输入的文本。

HTML代码:

不.
全名
001

002

003


Javascript代码:
$(函数(){())
$()。Click(函数(事件){)
已经有了输入,而不需要响应点击事件。
如果($(这个))子(),长度> 0)
返回false;
tdobj = $(this)功;
VaR的借口= tdobj.html();
获取当前文本
无功inputobj = $();
创建一个文本框元素
(tdobj .html); / /空TD的所有元素
inputobj
宽度(tdobj.width())。
设置具有相同宽度的文本框
高度(tdobj.height())。
CSS({边界:0px
瓦尔(借口)
appendto(tdobj)。
/ /创建文本框插入的最后一个子节点tdobj
触发器(焦点)
用触发器触发事件的方法
触发器();
InputObj.keyup(功能(事件){)
如果(event.which = 13)
用户可以按回车键。
{
瓦迩();
TdObj.html(文本);
}
如果(event.which = 27)

{
TdObj.html (preText);
}
});
输入编辑模式,不再处理单击事件。
InputObj.click(function(){()
返回false;
});
});
});
希望本文能对大家的jQuery程序设计有所帮助。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部