当前位置：文江博客话题详情

Web开发程序设计

实现可编辑的表格

发布于 2022-09-30 12:09:50 字数 4087 浏览 15 评论 0

[代码] [HTML]代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>可以编辑的表格</title>
<script type="text/javascript" src="jslib/jquery1.5.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
<table border="1px">
<tr>
<td>编辑</td>
<td>表格</td>
</tr>
</table>
</body>
</html>

复制代码[代码] ajax框架 jquery库

$(document).ready(function(){
var tds=$("td");
tds.click(tdclick);
});
function tdclick(){
var td=$(this);
//1,取出当前td中的文本内容保存起来
var text=td.text();
//2,清空td里面的内容
td.html(""); //也可以用td.empty();
//3，建立一个文本框，也就是input的元素节点
var input=$("<input>");
//4，设置文本框的值是保存起来的文本内容
input.attr("value",text);
input.keyup(function(event){
var myEvent =event||window.event;
var kcode=myEvent.keyCode;
if(kcode==13){
var inputnode=$(this);
var inputtext=inputnode.val();
var tdNode=inputnode.parent();
tdNode.html(inputtext);
tdNode.click(tdclick);
}
});
//5，将文本框加入到td中
td.append(input);
//6,清除点击事件
td.unbind("click");
}

复制代码

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

关于作者

暂无简介

0 文章

0 评论

668 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文