利用JQuery实现即时行内编辑

最ヅ后愛上你 · 发表于 2009-9-15 00:03:21

Web2.0 时代很流行的一个效果：即时编辑，本范例仅实现了编辑效果，并未涉及与数据库通信的操作。
复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用JQuery实现即时行内编辑</title>
<style type="text/css">
body { font-size: 14px; background: #fff;}
#inputData { border: 1px solid #f60; background: #ffc;}
</style>
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Field").dblclick(function() {
      _oldData = $("#Field").text();

      $("#Field").hide();
      $("#Box").append("<input type='text' id='inputData' value='" + _oldData + "' />");
      $("#Box > input").focus().blur(function() { EditComplete(); }).keydown(function(event) {
         if(event.keyCode == 13) { EditComplete(); }
      });
});
});

function EditComplete() {
_newData = $("#Box > input").val();
$("#Box > input").remove();
$("#Field").show().text(_newData);
}
</script>
</head>

<body>
<div id="Box">
<div id="Field">双击编辑我</div>
</div>
</body>
</html>

请将上列代码复制保存为html文件，文件名不限；同时下载jquery-1.2.1.js与其放在同一目录下。

		自动登录	找回密码
密码			注册