1.html部分
JQueryEdit.html源代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery实例3:可编辑的表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/edit.css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jqueryedit.js"></script>
</head>
<body>
<table border="1px">
<tr>
<td>跑酷</td>
<td>中国功夫</td>
</tr>
</table>
</body>
</html>
2.javascript部分：
jqueryedit.js源代码：
//在页面加载时，让所有的td都拥有一个点击事件
$(document).ready(function() {
//找到所有的td节点
var tds = $("td");
//给所有的td节点增加点击事件
tds.click(tdclick);
});
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);
//让文本框可以响应键盘按下弹起的事件，主要用于处理回车确认
input.keyup(function(event) {
//1.获取当前用户按下的键值
//解决不同浏览器获取事件对象的差异
var myEvent = event || window.event;
var kcode = myEvent.keyCode;
//2.判断是否是回车按下
if(kcode == 13)
{
var inputNode = $(this);
//3.获取当前文本框的内容
inputText = inputNode.val();
//4.清空td里面的内容
var tdNode = inputNode.parent();
//5.将保存的文本框的内容填充到td中
tdNode.html(inputText);
//6.让td重新拥有点击事件
tdNode.click(tdclick);
}
});
//6.将文本框加入到td中
td.append(input); //也可以用input.appendTo(td);
//6.5让文本框里面的文字被高亮选中
//需要将jquery的对象转换成DOM对象
var inputdom = input.get(0);
inputdom.select();
//7.需要清除td上的点击事件
td.unbind("click");
}
3.css部分
edit.css源代码：
td {
/*相邻边被合并*/
border-collapse: collapse;
}
分享到：
相关推荐
在可编辑表格中，可能需要用到`html()`或`text()`方法来改变单元格的内容，`attr()`来切换编辑状态（如`contenteditable`属性）。 4. **动态内容**：在用户编辑表格后，可能需要将这些更改持久化，这通常涉及到Ajax...
本实例重点在于“jQuery-可编辑表格”，这通常指的是使用jQuery来创建用户可以直接在前端编辑表格数据的功能。这种功能极大地提高了用户与网页交互的便捷性和效率，尤其是对于数据管理和展示的场景。 首先，要实现...
《jQuery+PureCSS可编辑表格插件：打造高效交互体验》 在网页开发中，数据展示和交互性是至关重要的元素。jQuery与PureCSS结合的可编辑表格插件，为开发者提供了一种高效且灵活的方式来实现这一目标。该插件通过...
在网页开发中，jQuery 是一个...综上所述，利用 jQuery 实现可编辑表格涉及到 HTML 结构、jQuery 事件监听、DOM 操作以及可能的数据交互。通过结合这些技术，您可以创建出一个功能丰富的、用户友好的可编辑表格组件。
本文实例讲述了jQuery实现的可编辑表格。分享给大家供大家参考，具体如下： <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <meta ...
在实际应用中，可能需要结合这些技术来创建复杂的交互效果，如动态加载数据、编辑表格项并实时保存等。理解并熟练运用这些jQuery技巧，将使你的网页更具吸引力和用户友好性。 通过实践和不断学习，你可以进一步提升...
在这个"可编辑表格js代码"中，`demo.html`很可能是展示这个功能的实例页面，它可能包含了一个预定义的表格，并应用了相关的JavaScript代码，使得用户可以直接在浏览器中编辑表格内容。而`js`文件则包含了实现这一...
**第二部分：可编辑表格** 在“JQuery实战第二讲：可以编辑的表格”中，我们将探讨如何利用jQuery实现表格元素的动态编辑功能。这涉及到对表格单元格的选择、内容获取与修改，以及事件监听，为用户提供交互式的数据...
打开这些HTML文件，你将看到一个可编辑的表格，可以单击行或双击单元格进行编辑。 通过以上方法，你可以根据实际需求定制更复杂的编辑功能，如添加验证、保存到服务器等。在网页交互设计中，这种用户友好的编辑体验...
文档中描述了创建可编辑表格的基本步骤，具体为：首先编写基本的HTML表格代码，然后使用CSS进行样式设计，接着利用jQuery绑定鼠标点击事件，最后实现单元格内容的可编辑。这个过程涉及了前端开发中的核心概念，包括...
再来看**可编辑表格**的应用。这种功能使得用户可以直接在表格单元格中进行编辑，而无需跳转到新的页面。使用jQuery，我们可以为每个可编辑单元格添加`click`事件监听器，当用户点击单元格时，可以显示一个表单或者...
这里我们探讨的主题是如何使用JavaScript（以及可能的库如jQuery或更专业化的数据网格库）来实现一个可编辑的表格功能。从提供的信息来看，你可能已经下载了一个名为"GridEdit.js"的文件和一个示例HTML页面"test....
它提供了丰富的配置选项和插件，如自定义列显示、可编辑单元格、数据排序、过滤等。开发者可以通过调整这些参数，实现高度定制化的表格功能。同时，DataTables的API提供了便捷的数据操作接口，如添加、删除和修改...
然而，通过引入jQuery库，我们可以实现交互式的、可编辑的表格，这就是"用jQuery编辑的可更改表格内容的斑马表"的核心概念。jQuery是一个强大的JavaScript库，它简化了DOM操作，事件处理以及动画效果，使得动态更新...
- 标签页是一种常见的网页布局方式，本实例将展示如何使用JQuery创建可切换的标签页。关键知识点包括`click`事件处理，使用`show`和`hide`方法控制内容的显示与隐藏，以及可能涉及的CSS样式调整。 4. **JQuery实战...
在Web开发中，常见的可编辑表格控件有jQuery DataTables、ag-Grid、Handsontable等。这些库提供了丰富的功能，如排序、过滤、分页以及行/列的增删改查。它们通常支持多种数据源，如JSON、CSV或数据库，且可以与后端...
本文实例讲述了JQuery实现可直接编辑的表格。分享给大家供大家参考。具体分析如下： 功能： 创建一个表格，用户单击某个单元格后，可以直接修改单元格文本。 在编辑状态下，用户可按回车键确认修改，按ESC键撤销修改...