本文演示了可以由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
程序设计有所帮助。