html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/edittable.js"></script> <style type="text/css">table { border: 1px solid black; border-collapse: collapse; width: 400px;}table td { border: 1px solid black; width: 50%;}table th { border: 1px solid black; width: 50%;}tbody th { background-color: #37AAC9; }</style> </head> <body> <table> <thead> <tr> <td colspan="2"> 各个地区 </td> </tr> </thead> <tbody> <tr> <th>编号</th> <th> 省份 </th> </tr> <tr> <td>000002</td> <td> 湖北 </td> </tr> <tr> <td>000003</td> <td> 河南 </td> </tr> <tr> <td>000004</td> <td> 河北 </td> </tr> <tr> <td>000005</td> <td> 山东 </td> </tr> </tbody> </table> </body></html>
edittable.js 代码：
$(function()
{
$("tbody tr:even").css("background-color","#C9EBFF");
var numId = $("tbody td:even");
numId.click(function()
{
var tdObj = $(this);
if(tdObj.children("input").length>0)
{
return false;
}
var textObj = $("<input type='text'>");
textObj.css("border-width","0").width(tdObj.width()).css("font-size","16px");
textObj.val(tdObj.html());
tdObj.html("");
textObj.appendTo(tdObj);
//textObj.get(0).select();
textObj.trigger("focus").trigger("select");
textObj.click(function()
{
return false;
});
//alert(tdObj.html());
//处理文本框上回车操作和esc按键操作
var temVal = textObj.val();
textObj.keyup(function(event)
{
var keycode=event.which;
//alert(keycode);
//如果是“enter”键，就保存值
if(keycode==13)
{
var textValue = $(this).val();
tdObj.html(textValue);
}
//如果是“esc”按就撤销
if(keycode==27)
{
tdObj.html(temVal);
}
}
);
});
});
另jquery-1.4.2.js跟edittable.js文件放在同一目录下。
分享到：
相关推荐
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
可以输入单价计算出金额，输入金额反算单价，统计合计功能支持键盘左右上下移动功能。
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...
jquery可编辑表格代码实现
在本文中，我们将深入探讨jQuery Easy UI中的`edatagrid`组件，以及如何实现动态编辑表格，特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具，它扩展了基本的`datagrid`功能，提供了更丰富的...
在创建可编辑表格时，这些功能尤为重要，因为我们需要动态地改变表格单元格（`<td>`）的内容，响应用户的编辑操作。 1. **表格结构**：创建一个基本的HTML表格，包括表头（`<thead>`）和数据区域（`<tbody>`）。每...
总的来说，这个jQuery可编辑表格代码结合了jQuery的便利性、自适应布局的灵活性和动态数据操作的实用性，为开发者提供了一个高效且易用的工具，使得构建交互性强、适应多设备的表格应用变得轻而易举。
本主题将深入探讨jQuery在创建可编辑表格、实现横向和纵向菜单、构建标签页、设计级联下拉框以及窗口管理方面的应用。 首先，让我们谈谈jQuery可编辑表格。在网页上展示数据时，有时需要用户能够直接在表格中进行...
总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
动态编辑表格的关键在于监听用户交互，如点击事件，然后更新相应的表格数据。 1. **引入jQuery库**：在HTML文件中，通过`<script>`标签引入jQuery库。通常，你可以从CDN（内容分发网络）获取最新版本的jQuery，例如...
通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...
通过以上步骤，我们就实现了使用jQuery编辑表格并在用户保存更改时，通过Servlet将这些更改同步到后台的ORACLE数据库。这个过程涉及到前端的事件处理、Ajax通信，以及后端的Servlet和数据库操作，展示了Web应用中...
<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编辑表格+JS日历【升级版】"，这是一个结合了数据编辑和日历功能的Web应用组件。这个升级版相较于之前的版本，不仅在视觉效果上进行了美化，提高了用户体验，而且还添加了登录...
《JQuery可编辑表格小结》 在网页开发中，数据展示往往需要用到表格，而让表格中的数据可编辑则能极大地提升用户体验。JQuery库以其简洁的API和强大的功能，成为了实现这一目标的理想选择。本文将对使用JQuery构建...
在这个“jquery可编辑表格.zip”压缩包中，我们关注的是如何使用jQuery来实现一个可编辑的表格功能。这样的功能对于数据展示和管理来说非常实用，尤其是在需要用户即时更新或输入数据的场景下。 首先，让我们详细...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...