JSP代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
<link rel="stylesheet" type="text/css" href="css/editTable.css">
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击表格项就可以编辑</th>
</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>
JS代码
/*
* 1,要解决内部单双数背景颜色不一样
* 2,将要编辑的表格中加一个文本框
* 3,将文本框覆盖要编辑的表格，还要将原来表格中的值保存下来，并放到文本框中去
* 4,通过键盘来控制，实现Esc功能
*/
// $(callback)是$(document).ready()的简写。
$(function(){
//找到表格的内容区域中所有的奇数行
$("tbody>tr:even").css("background-color","#ECE9D8");
//接下来就是要找到有学好的表格
var numTd = $("tr>td:even");
numTd.click(function(){
//找到当前鼠标点击的td,this对应的就是响应了click的那个td
var tdobj = $(this);
//要是td中有子节点input，就return false，不执行click处理
if(tdobj.children("input").length>0){
return false;
}
//获取选择的td的值
var tdtext = tdobj.html();
//然后再清空td中的内容
tdobj.html("");
//创建一个文本框
var inputobj = $("<input type='text'>");
//将创建的文本框加到td中去
inputobj.appendTo(tdobj);
//将文本框的长度设置为td的长度
inputobj.width(tdobj.width());
//将文本框的边框去掉
inputobj.css("border-width","0");
//将文本框的背景颜色设置和td的一样
inputobj.css("background-color",tdobj.css("background-color"));
//将td中的值放到input中去
//inputobj.text(tdtext);
inputobj.val(tdtext);
//将input中的字体设置和原来的一样
inputobj.css("font-size","16px");
//设置文本框插入之后就被选中
inputobj.trigger("focus").trigger("select");
//防止事件传播
inputobj.click(function() {
return false;
});
//处理文本框上回车和esc按键的操作
inputobj.keyup(function(event){
//获取当前按下键盘的键值
var keycode = event.which;
//处理回车键
if(keycode == 13){
//获取当当前文本框中的内容
var inputvalue = $(this).val();
//tdobj.text(inputvalue);
//tdobj.html(inputvalue);
tdobj.val(inputvalue);
}
//处理esc按键
if(keycode == 27){
//将td中的内容还原成text
tdobj.html(tdtext);
}
});
});
});
CSS代码
@CHARSET "UTF-8";
table{
border: 1px solid black;
/*修正单元格之间的边框不能合并*/
border-collapse: collapse;
width: 400px;
}
table th {
border: 1px solid black;
width: 50%;
}
table td {
border: 1px solid black;
width: 50%;
}
tbody th {
background-color: #A3BAE9;
}
相关推荐
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...
在这个“jquery可编辑表格.zip”压缩包中，我们关注的是如何使用jQuery来实现一个可编辑的表格功能。这样的功能对于数据展示和管理来说非常实用，尤其是在需要用户即时更新或输入数据的场景下。 首先，让我们详细...
《基于jQuery的无刷新表格控件开发详解》 在现代Web开发中，高效的数据展示和交互是提升用户体验的关键。jQuery作为一个轻量级的JavaScript库，因其简洁的API和丰富的插件生态，常被用于实现复杂的功能，如动态表格...
表格的每一行（`<tr>`）都包含可编辑的数据单元格（`<td>`）。 2. **jQuery事件**：使用jQuery监听表格元素的点击事件，比如`$('td').click(function())`。当用户点击某个单元格时，该单元格可能变为可编辑状态，...
基于Bootstrap和jQuery实现的简单可编辑表格通常包含以下几个关键知识点： 1. **Bootstrap表格组件**：Bootstrap框架提供了`.table`类，用于创建基本的表格结构。此外，还有`.table-striped`、`.table-bordered`等...
首先，`edatagrid`是基于jQuery和Easy UI框架的一个组件，它允许用户在表格中直接进行数据的添加、编辑和删除操作。这对于Web应用的数据管理界面特别有用，因为它减少了在后台与服务器之间的交互次数，提高了用户...
今天要介绍的一款jQuery是一个可编辑的表格，它的实现非常简单，主要利用了jQuery插件和PureCSS插件，简单的引用和初始化JavaScript语句即可让网页上的table表格可以自定义编辑，非常实用。
Tabulator是一款功能强大的jQuery UI插件，专门用于创建交互式、可定制的表格。这款工具以其易用性和灵活性而受到开发者们的青睐。在JavaScript开发领域，特别是在处理数据展示时，Tabulator提供了一种高效的方式，...
BootstrapTable 是一个基于 jQuery 和 Bootstrap 框架的开源表格插件，它的出现极大地简化了在 Web 应用中创建功能丰富的数据展示表格的过程。这个插件提供了多种实用功能，如单选、多选、排序、分页、编辑、导出和...
总结来说，这个压缩包提供了一个基于jQuery的可编辑表格解决方案，适用于需要用户交互式编辑表格数据的Web应用。通过学习`index.html`中的示例和`jquery.uitableedit.js`的源代码，开发者可以了解如何在自己的项目中...
在网页开发中，有时我们需要将用户在前端看到的表格数据导出为Excel文件，以便用户进行存储、编辑或进一步分析。这个任务可以通过JavaScript库，如jQuery来实现，它简化了DOM操作，使得前后端交互更加便捷。本篇将...
这样，用户在编辑表格后，可以立即看到变化，而不会被重定向或页面刷新打断用户体验。 6. **表格数据管理**：在实际应用中，表格数据可能存储在数据库中。因此，编辑操作通常涉及到数据的CRUD（创建、读取、更新、...
Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格，它允许用户在表格内直接编辑数据，无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作（创建、读取、更新、删除）非常实用，尤其适用于后台...
标题中的“基于ThinkPHP后台可编辑表格”是指利用ThinkPHP框架开发的一种后台管理系统，其中包含了一个可以编辑的表格功能。这种功能通常用于数据管理和维护，允许用户在后台直接查看、添加、修改或删除数据，提高了...
总结，构建一个基于jQuery的可编辑Web Word应用，主要涉及到HTML5的`contentEditable`属性、jQuery事件处理、富文本编辑器的集成以及Ajax数据交互。通过这些技术，我们可以创建一个功能齐全、用户体验良好的在线文档...