第一千零三十六章 考验
html代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery-EditTable.jsp</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/edittable.css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/edittable.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击可以编辑表格</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>学号</th>
</tr>
<tr>
<td>123</td>
<td>张三</td>
</tr>
<tr>
<td>456</td>
<td>李四</td>
</tr>
<tr>
<td>456</td>
<td>王五</td>
</tr>
<tr>
<td>456</td>
<td>赵六</td>
</tr>
</tbody>
</table>
</body>
</html>
JS
$(function(){
$("tbody tr:even").css("background-color","#369456");
var numTd=$("tbody td:even");
numTd.click(function(){
var tdObj=$(this);
if(tdObj.children("input").length>0){
return false;
}
var text=tdObj.html();
var inputObj=$("<input type='text' />");
inputObj.css("border-width","0");
inputObj.css("font-size","16px");
inputObj.width(tdObj.width());
inputObj.val(tdObj.html());
inputObj.css("background-color",tdObj.css("background-color"));
tdObj.html("");
inputObj.appendTo(tdObj);
//inputObj.get(0).select();
inputObj.trigger("focus").trigger("select");
inputObj.click(function(){
return false;
});
inputObj.keyup(function(event){
var keycode=event.which;
if(keycode==13){
var inputValue=$(this).val();
tdObj.html(inputValue);
}
if(keycode==27){
tdObj.html(text);
}
});
});
});
CSS代码
@CHARSET "UTF-8";
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:#EbbbbE;
}
分享到：
相关推荐
这里我们设定单元格可编辑： ```javascript $("#myGrid").jqGrid({ url: 'data.json', // 数据来源，可以是JSON格式的URL datatype: 'json', colModel: [ // 列定义 { name: 'id', index: 'id', width: 50, ...
"JS特效-表格图层"的标签进一步确认了这一点，它表明这个压缩包可能包含一种JavaScript特效，用于创建具有可编辑单元格的表格层。 JavaScript是一种广泛使用的客户端脚本语言，常用于网页交互和动态内容的生成。在...
本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格，这在数据展示和用户交互方面具有广泛的应用。 首先，让我们了解基本概念。jQuery的核心特性包括选择器（用于查找HTML元素）、DOM操作（添加、删除或修改...
本教程将探讨如何利用jQuery实现一个可编辑的表格，让用户体验到更加交互式的数据管理。 首先，我们需要理解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素开始，其中包含`<tr>`（行）元素，每个行内有`...
本文介绍了如何在 jQuery Easyui DataGrid 中实现点击某个单元格后，该单元格即可进入编辑状态，当用户编辑完数据并把焦点移开该单元格时，所编辑的数据自动保存的功能。 知识点一：DataGrid 初始化与配置 要使用 ...
本教程将探讨如何利用jQuery实现一个功能，即点击表格的某个单元格时，该单元格变为可编辑状态，用户可以进行输入，然后保存更改。这个功能对于数据展示和轻量级的数据管理非常实用。 首先，我们需要一个基本的HTML...
这个简单的示例展示了如何使用jQuery实现基本的可编辑表格功能。实际应用中，可能还需要考虑更多细节，比如输入验证、多列同时编辑、键盘快捷键支持等。同时，为了提供更好的用户体验，可以考虑使用插件如`jQuery...
本主题将深入探讨如何使用jQuery实现一个可编辑的表格功能，允许用户即时修改表格内的数据并保存更改。 首先，我们需要一个基本的HTML结构来创建表格。表格通常由`<table>`标签定义，`<thead>`包含表头（`<th>`标签...
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
本文将深入探讨如何使用jQuery实现一个可编辑的表格，这将帮助开发者提高用户体验，允许用户直接在表格中修改数据。 首先，我们需要理解jQuery的核心特性：DOM操作、事件处理和动画效果。jQuery库简化了JavaScript...
本文将详细探讨与“jquery 图表插件可编辑表格生成走势图jquery 图表统计”相关的知识点，帮助你更好地理解和应用这些技术。 首先，jQuery图表插件是用于在网页上创建各种可视化数据的工具，它们可以将复杂的数据...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本教程将深入探讨如何使用jQuery...通过学习和实践，你可以根据实际需求进行定制，创建出更加复杂的可编辑表格应用。
在本文中，我们将深入探讨如何实现`jQuery Table`编辑功能，包括鼠标点击表格单元格进行编辑，以及在失去焦点(onblur)时通过Ajax保存数据。此外，我们还将提及与实现此功能相关的`jQuery`和`Table`技术。 首先，`...
本知识点将详细讲解如何利用jQuery图表插件创建可编辑的表格并生成动态走势图。 首先，jQuery图表插件是用于增强网页数据可视化的一种工具，它允许用户以图形方式展示数据，并且提供了丰富的自定义选项和交互功能。...
在本篇博客“jQuery学习记录----可编辑的表格（六）”中，作者分享了如何使用jQuery实现一个可编辑的表格功能。这个功能在Web应用中非常常见，特别是在数据管理和展示场景下。jQuery是一个强大的JavaScript库，它...
jTable是一款强大的jQuery插件，专门用于创建可编辑、可排序、可分页的表格，它简化了服务器端与客户端的数据交互，提供了丰富的API和模板，使得开发者可以快速构建动态表格。 总结起来，这个"jQuery编辑表格+JS...
然后，我们可以利用jQuery的事件监听器，如`click`或`focus`，来触发单元格变为可编辑状态。例如，当用户点击某个单元格时，可以将它的内容包装在一个`<input>`元素中，让用户输入新的值。 接下来，我们需要关注...