可编辑的Html表
Html table editable
我有一个非常简单的表结构
<table width='50%' id='tabs'>
<tr><td>1</td><td>5</td><td>6</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>2</td><td>2</td></tr>
</table>
和这里是我的简单的脚本,使表可编辑这是工作很好,但我发现它很慢,代码是不高效的。我想改进这个代码。顺便说一下,我正在使用jquery 1.3.2
var z={};
function tdClicks(){
var x="",y="";
$("table tr td").click(function(){
z=$(this);
x = $(this).text() || $(this).find("input[type='text']").val();
if(!x){
x="";
}
$(this).html("<input type='text' size='5' value='"+ x+"' />");
$(this).unbind("click");
$(this).find("input[type='text']").bind("blur", function(){
catchme($(this).val());
tdClicks();
});
});
}
function catchme(wht){
$(z).text(wht);
}
tdClicks();
请参阅JS FIDDLE HERE
try this
$("table tr td").on('blur',"input[type='text']", function( e ){
$(this).closest('td').text(
$(this).val()
);
});
$("table").on('click','td', function( e ){
if ( $(this).find('input').length ) {
return ;
}
var input = $("<input type='text' size='5' />")
.val( $(this).text() );
$(this).empty().append( input );
});
你可以在http://jsfiddle.net/v7znh/13/
找到它我已经更新了jquery 1.3的代码,作为用户注释
$("table td").click( function( e ){
if ( $(this).find('input').length ) {
return ;
}
var input = $("<input type='text' size='5' />")
.val( $(this).text() );
$(this).empty().append( input );
$(this).find('input')
.focus()
.blur( function( e ){
$(this).parent('td').text(
$(this).val()
);
});
});
检查这个http://jsfiddle.net/v7znh/16/
这样看起来更简洁一些
$("table").on("click", "td:not(.active)", function () {
var $this = $(this);
var $textbox = $("<input>", { type: "text", size: 5, value: $this.addClass("active").text() });
$this.html($textbox);
$textbox.focus();
});
$("table").on("blur", "input:text", function () {
var $this = $(this);
$this.parent().removeClass("active").text($this.val());
});
http://jsfiddle.net/hunter/v7znh/12/
您可以使用contenteditable
属性
$("table tr td").attr("contenteditable", true);
例子要在Internet explorer中工作,请使用以下
$("table tr td").each(function() {
var contents = $(this).html();
$(this).html($("<div>").append(contents));
});
$("table tr td div").attr("contenteditable", true);
例子看一下这个问题了解更多细节
如何使HTML表格单元格可编辑?
也许它能帮上忙:
$(function(){
var x="",y="";
$("table tr td").click(function(){
x = $(this).text() || $(this).find("input[type='text']").val();
if(!x){
x="";
}
$(this).html("<input type='text' size='5' value='"+ x+"' />");
$(this).unbind("click");
$(this).find("input[type='text']").bind("blur", function(){
$(this).text($(this).val());
});
});
});
好运相关文章:
- 使用PageMod将所有文本框转换为所见即所得HTML编辑器
- 如何像HTML编辑器一样自动为代码着色
- 清除 uikit html 编辑器
- 如何使用javascript在文本区域中获取Html编辑器的输入
- 使用 JavaScript 在 DOM 中平展嵌套跨度以优化 HTML 编辑器输出
- Visual Studio 2015 扩展将 JavaScript 文件中的字符串 HTML 视为 HTML 编辑
- Javascript html 编辑器光标焦点跟随鼠标
- DNN:HTML编辑器不显示要选择图像的文件夹
- 制作一个在线HTML编辑器
- 无法修改控件集合,因为控件包含代码块(即 <% ..%>) Ajax 工具包 HTML 编辑器
- 获取编辑器内容-Ext Js html编辑器
- 所见即所得HTML编辑器,字符左和MySQL存储优化
- 如何使用Jquery验证引擎来验证CLEditor(html编辑器)输入
- js无法从HTML编辑器CKEDITOR中抓取值
- 如何允许Visual Studio在html编辑器中验证{$Something}
- html编辑器Extjs 4.0上的源代码按钮
- 我试图在Chrome中使用HTML编辑网页的宽度和高度,使用按钮
- 如何通过文本区或html编辑器插入图像
- 如何获得由javascript html编辑器控制的文本区域的值
- Ajax HtmL编辑器图片上传JSON错误