1、EditTable.jsp 文件
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>可编辑的表格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<link rel="stylesheet" type="text/css" href="css/editTable.css">
<script type="text/javascript" src="scripts/jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//用Jquery实现隔行换色
$("#table1 tbody tr:even").css("background", "#ECF5FF");
$("#table1 tbody td:even").dblclick(function(){
var inputObj = $("<input type='text'/>");
var tdObj = $(this);
//当前td中有input，不执行dblclick处理
if(tdObj.children("input").length > 0){
return false;
}
//获得td中的内容
var text = tdObj.html();
//将当前td中的内容放到文本框中
inputObj.val(text);
//使文本框的宽度和td的宽度相同
inputObj.width(tdObj.width());
//使文本框的高度和td的高度相同
inputObj.height(tdObj.height());
//设置文本框的边框为0
inputObj.css("border-width","0px");
//设置文本框中的文字大小是16px
inputObj.css("font-size","18px");
//设置文本框的背景色
inputObj.css("background-color",tdObj.css("background-color"));
//清空td中的内容
tdObj.html("");
//将文本框插入到td中
tdObj.html(inputObj);
//选中文本框
inputObj.get(0).select();
//双击文本框不触发td的双击事件
inputObj.dblclick(function(){
return false;
});
//处理文本框上回车和esc按键的操作
inputObj.keyup(function(event){
//获得键值
var keyCode = event.which;
//处理回车的情况
if(keyCode == 13){
tdObj.html($(this).val());
}
//处理esc的情况
if(keyCode == 27){
tdObj.html(text);
}
});
});
});
</script>
</head>
<body>
<table id="table1" border="1px" cellpadding="0px" cellspacing="0px">
<thead>
<tr>
<td colspan="2" align="center">鼠标点击表格项就可以编辑</td>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>000001</td>
<td>张三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</td>
<td>赵六</td>
</tr>
</tbody>
</table>
</body>
</html>
2、editTable.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: #A3BAE9;
}
分享到：
相关推荐
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
jquery可编辑表格代码实现
【jQuery可编辑表格】是一种网页开发技术，它利用JavaScript库jQuery的强大功能，为用户提供交互式的表格，用户不仅可以查看数据，还可以直接在表格中编辑数据。这样的功能极大地提升了用户体验，尤其适用于数据管理...
总结来说，利用jQuery创建可编辑表格涉及的关键技术包括DOM操作、事件绑定、数据交互以及用户体验优化。这样的功能增强了用户与网页的互动性，使得数据管理更为直观和高效。通过结合HTML、CSS和jQuery，开发者可以...
首先，让我们谈谈jQuery可编辑表格。在网页上展示数据时，有时需要用户能够直接在表格中进行编辑。jQuery提供了各种插件，如DataTables或jqGrid，它们支持表格的动态编辑功能。这些插件允许你在单元格上添加编辑按钮...
《JQuery可编辑表格小结》 在网页开发中，数据展示往往需要用到表格，而让表格中的数据可编辑则能极大地提升用户体验。JQuery库以其简洁的API和强大的功能，成为了实现这一目标的理想选择。本文将对使用JQuery构建...
4. **flexigrid.js**和**flexigrid.pack.js**：这些是jQuery可编辑表格插件的核心JavaScript文件，包含插件的逻辑代码。未压缩的flexigrid.js方便阅读和调试，而flexigrid.pack.js是压缩过的版本，用于生产环境以...
在这个“jquery可编辑表格.zip”压缩包中，我们关注的是如何使用jQuery来实现一个可编辑的表格功能。这样的功能对于数据展示和管理来说非常实用，尤其是在需要用户即时更新或输入数据的场景下。 首先，让我们详细...
《自适应PC手机端的jQuery可编辑表格代码详解》 在现代网页开发中，交互性和灵活性是提升用户体验的关键因素。jQuery作为一个强大的JavaScript库，为开发者提供了丰富的功能和简便的API，使得网页动态效果的实现变...
通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
综上所述，构建一个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实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
**jQuery可编辑表格详解** 在Web开发中，表格是一种常用的数据展示方式，而jQuery可编辑表格则让用户体验更上一层楼。它允许用户直接在表格内进行数据编辑，无需跳转页面或刷新，大大提升了交互性和效率。jQuery库...
总的来说，创建一个jQuery可编辑表格涉及HTML结构的设计、jQuery事件监听和数据处理。通过合理运用这些技术，我们可以构建出用户友好且功能强大的表格应用，方便用户在前端直接编辑和管理数据。同时，结合使用现有的...
代码片段： 姓名 性别 年龄 电话 操作 <td colspan="5" class="danger"><button class="btn btn-primary btn-sm">增加</button></td> </table>