//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>
<title>JQuery实现可编辑的表格</title>
<link href="css/EditTable.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/EditTable.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td>123546789</td>
<td>987654321</td>
</tr>
</table>
</body>
</html>
EditTable.css文件
Css代码
table,td
{
border:solid 1px black;
border-collapse:collapse;
}
EditTable.js文件
Javascript代码
//相当于在页面中的body标签加上onload事件
$(function(){
//找到所有的td节点
var tds=$("td");
//给所有的td添加点击事件
tds.click(function(){
//获得当前点击的对象
var td=$(this);
//取出当前td的文本内容保存起来
var oldText=td.text();
//建立一个文本框，设置文本框的值为保存的值
var input=$("<input type='text' value='"+oldText+"'/>");
//将当前td对象内容设置为input
td.html(input);
//设置文本框的点击事件失效
input.click(function(){
return false;
});
//设置文本框的样式
input.css("border-width","0");
input.css("font-size","16px");
input.css("text-align","center");
//设置文本框宽度等于td的宽度
input.width(td.width());
//当文本框得到焦点时触发全选事件
input.trigger("focus").trigger("select");
//当文本框失去焦点时重新变为文本
input.blur(function(){
var input_blur=$(this);
//保存当前文本框的内容
var newText=input_blur.val();
td.html(newText);
});
//响应键盘事件
input.keyup(function(event){
// 获取键值
var keyEvent=event || window.event;
var key=keyEvent.keyCode;
//获得当前对象
var input_blur=$(this);
switch(key)
{
case 13://按下回车键，保存当前文本框的内容
var newText=input_blur.val();
td.html(newText);
break;
case 27://按下esc键，取消修改，把文本框变成文本
td.html(oldText);
break;
}
});
});
}); EditTable.css文件
Css代码
table,td
{
border:solid 1px black;
border-collapse:collapse;
}
EditTable.js文件
Javascript代码
//相当于在页面中的body标签加上onload事件
$(function(){
//找到所有的td节点
var tds=$("td");
//给所有的td添加点击事件
tds.click(function(){
//获得当前点击的对象
var td=$(this);
//取出当前td的文本内容保存起来
var oldText=td.text();
//建立一个文本框，设置文本框的值为保存的值
var input=$("<input type='text' value='"+oldText+"'/>");
//将当前td对象内容设置为input
td.html(input);
//设置文本框的点击事件失效
input.click(function(){
return false;
});
//设置文本框的样式
input.css("border-width","0");
input.css("font-size","16px");
input.css("text-align","center");
//设置文本框宽度等于td的宽度
input.width(td.width());
//当文本框得到焦点时触发全选事件
input.trigger("focus").trigger("select");
//当文本框失去焦点时重新变为文本
input.blur(function(){
var input_blur=$(this);
//保存当前文本框的内容
var newText=input_blur.val();
td.html(newText);
});
//响应键盘事件
input.keyup(function(event){
// 获取键值
var keyEvent=event || window.event;
var key=keyEvent.keyCode;
//获得当前对象
var input_blur=$(this);
switch(key)
{
case 13://按下回车键，保存当前文本框的内容
var newText=input_blur.val();
td.html(newText);
break;
case 27://按下esc键，取消修改，把文本框变成文本
td.html(oldText);
break;
}
});
});
});
分享到：
相关推荐
总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
在网页开发中，jQuery 是一个...综上所述，利用 jQuery 实现可编辑表格涉及到 HTML 结构、jQuery 事件监听、DOM 操作以及可能的数据交互。通过结合这些技术，您可以创建出一个功能丰富的、用户友好的可编辑表格组件。
总的来说，利用jQuery实现可编辑表格是一项实用的技能，它使开发者能够快速构建动态、交互性强的网页应用。通过结合HTML5的新特性、jQuery的强大功能以及适当的前端框架，我们可以创建出满足各种需求的可编辑表格，...
这篇名为“JQuery实现可编辑表格”的博客文章可能深入探讨了如何利用jQuery的功能来创建一个用户可以编辑的表格。在网页设计中，这种功能常用于数据输入或管理应用程序，允许用户直接在表格内修改数据而无需跳转到...
总之，使用jQuery实现可编辑表格是一项实用的技术，它允许用户直接在网页上修改数据，提高了交互性和数据管理的效率。通过学习和实践，你可以根据实际需求进行定制，创建出更加复杂的可编辑表格应用。
在网页开发中，jQuery是一个非常强大的...总之，使用jQuery实现可编辑表格涉及多个方面，包括DOM操作、事件处理、数据管理以及用户交互优化。通过熟练掌握这些技巧，你可以创建出功能丰富且易于使用的Web应用程序。
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
**jQuery可编辑表格详解** 在Web开发中，表格是一种常用的数据展示方式，而jQuery可编辑表格则让用户体验更上一层楼。它允许用户直接在表格内进行数据编辑，无需跳转页面或刷新，大大提升了交互性和效率。jQuery库...
在这个“jquery可编辑表格.zip”压缩包中，我们关注的是如何使用jQuery来实现一个可编辑的表格功能。这样的功能对于数据展示和管理来说非常实用，尤其是在需要用户即时更新或输入数据的场景下。 首先，让我们详细...
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
通过以上步骤，我们可以创建一个功能完备、用户体验良好的可编辑表格。JQuery的强大功能使得这个过程变得相对简单，但要注意在实际项目中还需要考虑代码组织、模块化和测试等多方面因素，以确保代码的可维护性和稳定...
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
<title>jQuery 可编辑表格 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px;...
总结来说，利用jQuery创建可编辑表格涉及的关键技术包括DOM操作、事件绑定、数据交互以及用户体验优化。这样的功能增强了用户与网页的互动性，使得数据管理更为直观和高效。通过结合HTML、CSS和jQuery，开发者可以...
总之，利用jQuery实现可编辑表格是一项实用的技能，能够提升网页的交互性。通过理解HTML基础、jQuery选择器和事件处理，以及HTML5的`contenteditable`属性，开发者可以轻松地创建自己的可编辑表格功能。在实际项目中...
jquery可编辑表格代码实现
对于复杂的编辑需求，可以引入插件如DataTables，它提供了丰富的可编辑表格功能，并集成了排序、过滤和搜索等特性。 总之，利用JQuery实现可编辑的表格，不仅提升了用户交互性，还增强了网页的数据管理能力。在实际...