<html> <head> <title>JQuery动态编辑的表格DATA</title> <!--<meta charset="utf-8">--> <link rel="stylesheet" type="text/css" href="editTable.css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script src = "editTable.js"></script> </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>
$(document).ready(function(){
//$("tbody td:even")得到表格左边的单元格。:even表示：匹配所有索引值为偶数的元素，从 0 开始计数
$("tbody tr:even").css("background-color","#ECE9D8");
var numId = $("tbody td:even");
//所有的得到表格左边的单元格都注册了点击事件
numId.click(function(){
var tdObj = $(this);//获得当前td单元格对象
//当前文本框里是否有input对象，children()表示：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
if(tdObj.children("input").length>0){
return false;
}
var inputObj = $("<input type='text'>");//创建文本对象封装成JQuery对象
//html()：取得第一个匹配元素的html内容
var text = tdObj.html();
inputObj.val(text);//将单元格里面的内容赋值到创建的文本对象
tdObj.html("");//将当前td单元格内容清空
inputObj.width(tdObj.width());//设置文本框对象的宽度与单元格的宽度相同
inputObj.css("border-width","0");//设置文本框的边框
inputObj.css("font-size","16px");//设置文本框字体与单元格中的字体大小一样
//设置文本框的背景色与单元格的背景色相同
inputObj.css("background-color",tdObj.css("background-color"));
inputObj.appendTo(tdObj);//将文本框追加到单元格中
//inputObj是JQuery对象,get(0)获到的就是一个DOM对象即文本框（非JQuery对象）
//inputObj.get(0).select();
//trigger()：在每一个匹配的元素上触发某类事件。先触发focus后触发select事件
inputObj.trigger("focus").trigger("select");
//文本框的单击事件
inputObj.click(function(){
return false;
});
//处理文本框上的Enter和ESC事件
inputObj.keyup(function(event){
//获得当前所按下的键盘的键值
var keyCode = event.which;
if(keyCode == 13){//Enter
var inputObjText = $(this).val();
tdObj.html(inputObjText);
tdObj.remove("input");
}else if(keyCode == 27){//Esc
tdObj.html(text);
jAlert(text, '确认');
tdObj.remove("input");
}
});
});
});
table {
border:1px solid black;
/**
* border-collapse : separate | collapse
* 设置或检索表格的行和单元格的边是合并在一起(collapse没有边框)还是按照标准的HTML样式分开
**/
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: #A3BAE9;
}
来自：I forgot.
博客已移至http://blog.aboutc.net/欢迎访问
相关推荐
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
本教程将深入探讨如何使用jQuery实现动态更改table表格数据，让你的网页表格具有实时编辑功能，提升用户体验。 首先，我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`元素开始，包含若干个`<tr>`（行）...
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
在本文中，我们将深入探讨jQuery Easy UI中的`edatagrid`组件，以及如何实现动态编辑表格，特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具，它扩展了基本的`datagrid`功能，提供了更丰富的...
在这个"jQuery表格添加行数据代码"中，我们主要关注的是如何利用jQuery来动态地向表格中添加、编辑和删除行数据。这个压缩包包含了一些关键文件，如CSS样式文件、HTML页面、JavaScript脚本以及说明文件。 首先，`...
这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论如何使用jQuery添加新行到表格。在HTML中，表格由`<table>`标签定义，行由`<tr>`标签表示，而...
5. **数据动态加载**：虽然示例中的数据是静态的，但在实际应用中，表格数据通常从服务器动态获取。使用Ajax请求获取JSON数据，然后使用jQuery构建表格。例如，使用`.each()`遍历JSON对象并创建相应的`<tr>`和`<td>`...
本项目涉及的是使用jQuery实现的一个带有分页功能的动态数据表格插件，该插件的设计灵感来源于Excel，允许用户进行类似Excel的操作，如数据编辑和排序。 首先，`index.html`是项目的主页面文件，它包含了HTML结构，...
总的来说，这个jQuery可编辑表格代码结合了jQuery的便利性、自适应布局的灵活性和动态数据操作的实用性，为开发者提供了一个高效且易用的工具，使得构建交互性强、适应多设备的表格应用变得轻而易举。
本文将深入探讨如何使用jQuery实现表格的动态增删改功能，并结合后台数据进行绑定，以构建高效的数据展示和管理界面。 首先，我们要理解jQuery的核心概念。jQuery通过选择器（如$("#id")或$(".class")）来选取DOM...
本主题将深入探讨jQuery在创建可编辑表格、实现横向和纵向菜单、构建标签页、设计级联下拉框以及窗口管理方面的应用。 首先，让我们谈谈jQuery可编辑表格。在网页上展示数据时，有时需要用户能够直接在表格中进行...
通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...
总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
<title>jQuery 可编辑表格 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px;...
总的来说，创建一个jQuery可编辑表格涉及HTML结构的设计、jQuery事件监听和数据处理。通过合理运用这些技术，我们可以构建出用户友好且功能强大的表格应用，方便用户在前端直接编辑和管理数据。同时，结合使用现有的...
在本项目中，我们主要关注的是"jQuery编辑表格+JS日历【升级版】"，这是一个结合了数据编辑和日历功能的Web应用组件。这个升级版相较于之前的版本，不仅在视觉效果上进行了美化，提高了用户体验，而且还添加了登录...
在`jQuery Table`编辑场景中，`jQuery`用于添加交互性，使得用户能够轻松地编辑表格内容。 要实现鼠标点击表格单元格即可编辑的功能，你需要对表格的每个单元格(`td`元素)添加`click`事件监听器。当用户点击单元格...
此外，对于可编辑表格，我们还需要考虑数据验证、错误提示、格式化等功能，这些可以通过添加额外的jQuery代码来实现。例如，可以使用`change`事件来实时验证输入，并通过`addClass()`和`removeClass()`改变单元格的...
本主题聚焦于“jquery可编辑表格”，这是一个实用的功能，常用于数据管理和用户输入场景，如在线表单、数据库前端展示等。在jQuery的帮助下，我们可以轻松创建动态、交互性强的表格，让用户可以直接在表格中进行编辑...