<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery示例:可编辑table</title>
<link type="text/css" rel="stylesheet" href="css/edit.css"/>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
<!--简单表格，一行两列，期望表格数据点击可修改-->
<table>
<tbody>
<tr>
<td>hello</td>
<td>world</td>
</tr>
</tbody>
</table>
</body>
</html>
//页面载入时，让td都有一个oncllick事件
$(document).ready(function(){
//找到所有td节点
var tds = $("td");
//给所有td节点添加点击事件
tds.click(tdclick);
});
//td被点击的事件
function tdclick(){
//0 保存当前td节点
var td = $(this);
//1 取出当前td的文本内容保存起来
var text = td.text();
//2 清空td里面的内容
td.html("");//也可以用td.empty();
//3 建立文本框，也就是input的节点
var input = $("<input>");
//4 设置文本框值，即保存的文本内容
input.attr("value",text);
//4.5让文本框可以响应键盘按下并弹起的事件
input.keyup(function(event){
//0 获取当前用户按下的键值
//截取不同浏览器获取事件对象的差异
var myEvent = event || window.event;
var kcode = myEvent.keyCode;
//1 判断是否是回车按下
if(kcode == 13){
var inputnode = $(this);
//2 获取当前文本框的内容
var inputtext = inputnode.val();
//3 清空td里面的内容
var tdNode = inputnode.parent();
//4 保存文本框的内容填充到td中
tdNode.html(inputtext);
//5 让td重新拥有点击事件
tdNode.click(tdclick);
}
});
//5 将文本内容加入td
td.append(input);//也可input.appendto(td)
//5.5让文本框文字被高亮选中
//需要将jquery的对象转换成dom对象
var inputdom = input.get(0);
inputdom.select();
//6 需要清除td上的点击事件
td.unbind("click");
}
分享到：
相关推荐
在本文中，我们将深入探讨如何实现`jQuery Table`编辑功能，包括鼠标点击表格单元格进行编辑，以及在失去焦点(onblur)时通过Ajax保存数据。此外，我们还将提及与实现此功能相关的`jQuery`和`Table`技术。 首先，`...
这个简单的示例展示了如何使用jQuery实现基本的可编辑表格功能。实际应用中，可能还需要考虑更多细节，比如输入验证、多列同时编辑、键盘快捷键支持等。同时，为了提供更好的用户体验，可以考虑使用插件如`jQuery...
本文将深入探讨“jQuery可编辑的table”这一主题，这在Web开发中是一个非常实用的功能，尤其对于数据展示和管理来说。通过使用jQuery，我们可以创建交互性强、用户友好的表格，允许用户直接在表格内进行编辑。 首先...
打开这些HTML文件，你将看到一个可编辑的表格，可以单击行或双击单元格进行编辑。 通过以上方法，你可以根据实际需求定制更复杂的编辑功能，如添加验证、保存到服务器等。在网页交互设计中，这种用户友好的编辑体验...
本主题将深入探讨如何使用jQuery实现一个可编辑的表格功能，允许用户即时修改表格内的数据并保存更改。 首先，我们需要一个基本的HTML结构来创建表格。表格通常由`<table>`标签定义，`<thead>`包含表头（`<th>`标签...
* edit - 表格可编辑 效果 * septalLine even, 单行样式背景 隔行背景变色显示数据 效果 odd 双行样式背景 * glide tableStyle, table样式 table滑动样式 效果 hoverStrle, ...
本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格，这在数据展示和用户交互方面具有广泛的应用。 首先，让我们了解基本概念。jQuery的核心特性包括选择器（用于查找HTML元素）、DOM操作（添加、删除或修改...
本文将深入探讨如何使用jQuery实现一个可编辑的表格，这将帮助开发者提高用户体验，允许用户直接在表格中修改数据。 首先，我们需要理解jQuery的核心特性：DOM操作、事件处理和动画效果。jQuery库简化了JavaScript...
本教程将探讨如何利用jQuery实现一个可编辑的表格，让用户体验到更加交互式的数据管理。 首先，我们需要理解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素开始，其中包含`<tr>`（行）元素，每个行内有`...
2. **创建可编辑表格**：设置表格单元格为可编辑，可以通过添加`contenteditable`属性实现。例如： ```html 初始数据 ``` 3. **监听用户交互**：使用jQuery的`.on()`方法监听表格单元格的`click`事件。当用户...
在网页开发中，有时我们需要将用户在网页上看到的数据导出到可编辑和存储的文件中，Excel 是一种常见的选择。tableExport 插件允许开发者通过简单的 JavaScript 调用来实现这一功能，无需复杂的后端处理。这个插件...
此外，可以结合jQuery的插件，如DataTables，它提供了丰富的可编辑表格功能，包括排序、过滤、分页等。DataTables支持各种编辑模式，包括弹出式编辑、行内编辑，以及与`<contenteditable>`属性的集成。 总的来说，...
2. **可定制化列**：允许设置每列的显示属性，如宽度、对齐方式、可编辑性等。 3. **排序和过滤**：提供列头点击进行数据排序，以及输入框进行数据过滤的功能。 4. **分页**：实现数据的分页展示，提高页面性能。 5....
在可编辑的表格中，`<td>`通常会转换成可以输入的`<input>`或`<textarea>`元素。 2. **JavaScript事件处理**：通过JavaScript，我们可以监听用户的点击事件，当用户点击表格单元格时，触发相应的编辑功能。这通常...
综上所述，构建一个jQuery可编辑的表格涉及多个方面，包括选择合适的插件、实现右键菜单、处理数据交互、添加验证机制以及优化用户体验。通过熟练掌握这些技术，可以创建出功能强大且用户友好的网页应用。
在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...
在网页开发中，创建交互式的用户体验是至关...总之，利用JQuery实现可编辑的表格，不仅提升了用户交互性，还增强了网页的数据管理能力。在实际开发中，可以根据项目需求进行定制，确保功能的完整性和性能的最佳平衡。
**jQuery可编辑表格详解** 在Web开发中，表格是一种常用的数据展示方式，而jQuery可编辑表格则让用户体验更上一层楼。它允许用户直接在表格内进行数据编辑，无需跳转页面或刷新，大大提升了交互性和效率。jQuery库...
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
本文将深入探讨如何使用jQuery开发四个关键的前端组件：Table、Grid、Menu和Layout，以提高Web应用的用户体验和交互性。 1. jQuery Table组件 jQuery Table组件用于展示结构化的数据，例如报表或数据库查询结果。...