JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JqueryEdit</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">
<link rel="stylesheet" type="text/css" href="../css/table.css">
</head>
<script type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript" src="../javascript/jqueryEdit.js"></script>
<body>
<table border="1px">
<tbody>
<tr>
<td>Edit1</td>
<td>Edit2</td>
<td>Edit3</td>
</tr>
</tbody>
</table>
</body>
</html>
$(document).ready(
function(){
//找到所有的TD节点
var tds =$("td");
//注册事件
tds.click(tdclick);
}
);
function tdclick(){
//找到当前节（TD）
var td = $(this);
//获得节点文本信息
var text = $(this).text();
//td.empty()清空
td.html("");
//创建input
var input = $("<input>");
//给当前input加入事件
input.keyup(function(event){
//判断浏览器
var myEvent = event || window.event;
//获得按键的值
var kcode = myEvent.keyCode;
var inputTexts = $(this).val();
if(kcode == 13){
//获得文本的值
var inputText = $(this).val();
//获得父TD
var tdNode = $(this).parent();
//赋值
tdNode.html(inputText);
//重新添加事件
tdNode.click(tdclick);
}
if(kcode == 27){
//获得文本的值
var inputText = $(this).val();
//获得父TD
var tdNode = $(this).parent();
//赋值
tdNode.html(text);
//重新添加事件
tdNode.click(tdclick);
}
});
//设属性
input.attr("value",text);
//也可以用input.appendTo(td);
td.append(input);
//文字全部选中
input.get(0).select();
//取消点击事件
td.unbind("click");
}
分享到：
相关推荐
在这个例子中，`numRows` 和 `numCols` 分别表示表格的行数和列数。通过这样的方式，我们可以在创建表格的同时为每个单元格赋予随机颜色。 在实际项目中，你可能会将这些代码封装到一个自定义的 jQuery 插件中，以...
这个“jquery做的日历小例子”是利用jQuery来创建一个实用的日历组件，可以帮助开发者快速实现网页上的日期选择功能，常见于表单验证、预约系统或者时间管理应用中。 首先，让我们深入了解jQuery如何实现日历功能的...
在实现分页功能时，jQuery 可以方便地获取和修改页面元素，以及处理用户交互。 3. **分页功能**：在大数据量的表格中，分页是必不可少的，它可以帮助用户更有效地浏览和管理数据。在本实例中，可能是通过 AJAX 请求...
在本文中，我们将深入探讨jQuery Easy UI中的`edatagrid`组件，以及如何实现动态编辑表格，特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具，它扩展了基本的`datagrid`功能，提供了更丰富的...
在这个例子中，DOM操作用于动态地向表格中插入新的行（`insertRow`）和单元格（`insertCell`）。 2. 表格操作：表格是HTML中表示表格数据的结构，由`<table>`、`<tr>`（表格行）、`<td>`（表格数据单元格）或`<th>`...
在这个例子中，它包含了一个表格用于展示数据，一个分页导航栏，以及可能的搜索和排序输入框。HTML代码通常会包含数据的占位符，实际数据显示则是通过JavaScript动态填充的。 接着，`js`文件包含了项目的JavaScript...
本教程将深入探讨如何使用jQuery实现表格的增加、修改、删除和保存功能，这些功能是许多Web应用程序的核心部分，特别是在数据管理界面中。 ### 增加 在jQuery中，增加表格行通常是通过动态创建`<tr>`元素并将其...
在这个“jquery实现生成表格”的主题中，我们将深入探讨如何利用jQuery来动态创建和操作表格元素，以便在网页上根据用户需求生成表格。 首先，我们需要理解HTML表格的基本结构，它由`<table>`标签作为容器，`<tr>`...
在创建或修改表格样式时，jQuery的`addClass()`、`removeClass()`和`toggleClass()`方法非常有用。`addClass()`可以添加一个或多个CSS类到选定的元素，从而改变其样式；`removeClass()`用于移除已添加的类；`...
以下是一些jQuery的经典应用实例，这些例子将帮助你理解jQuery的基本教程。** 1. **JQuery实战第一讲：概述、环境准备及入门实例** - **概述**：jQuery的基本理念是“Write Less, Do More”，它提供了一套简化的...
通过修改或扩展这些CSS，可以自定义表格的样式，使其与网站设计风格保持一致。 使用jqGrid时，首先需要在HTML页面中引入jQuery库和jqGrid的相关JS及CSS文件。然后，通过jQuery的选择器定位到目标元素，并调用jqGrid...
**jQuery学习小例子一** jQuery是一个广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这个"jQuery学习的小例子一"是初学者入门jQuery的一个良好起点，旨在帮助理解...
针对“jquery表格可编辑修改表格里面的数据”这个主题，我们将深入探讨如何利用jQuery实现这样的功能。 首先，要创建一个可编辑的表格，我们需要一个基本的HTML结构，如下所示： ```html 姓名 年龄 城市 ...
然而，通过引入jQuery库，我们可以实现交互式的、可编辑的表格，这就是"用jQuery编辑的可更改表格内容的斑马表"的核心概念。jQuery是一个强大的JavaScript库，它简化了DOM操作，事件处理以及动画效果，使得动态更新...
**jQuery可编辑表格详解** 在Web开发中，表格是一种常用的数据展示方式，而jQuery可编辑表格则让用户体验更上一层楼。它允许用户直接在表格内进行数据编辑，无需跳转页面或刷新，大大提升了交互性和效率。jQuery库...
或者，如果你选择在本地存储jQuery库，可以将文件放入合适的位置并相应地更改`src`属性。 接下来，我们关注如何选择表格元素。jQuery提供了多种选择器，如ID选择器(`$("#id")`)、类选择器(`$(".class")`)和标签选择...
如果你正在尝试实现或理解这个例子，你应该查看这个文件，里面可能包含了HTML结构、CSS样式和jQuery脚本，通过分析和学习这些代码，你可以更深入地理解如何利用jQuery实现表格树功能。 总结来说，jQuery表格树是...
本主题将深入探讨如何使用jQuery实现一个可编辑的表格，这种功能常见于数据管理、在线表单和动态内容展示等场景。支持全部主流浏览器，包括IE、Firefox、Safari、Chrome和Opera，使得这种技术具有广泛的适用性。 ...
"前端表格增删查改例子bootstrap+layer+jquery"是一个实用的示例项目，它结合了流行的前端技术和组件，以实现表格数据的动态操作。下面将详细介绍这个项目所涉及的知识点。 首先，Bootstrap是Twitter推出的一个开源...
这个小例子提供了使用 jQuery Grid 的完整环境，包括必要的 JavaScript 和 CSS 文件，以及 UI 和主题相关的资源。 **一、jQuery Grid 基本概念** 1. **数据网格**: 数据网格是一种可视化控件，用于展示和管理大量...