一,以下是html中body中的代码
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击选择项就可以编辑</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>0001</td>
<td>张三</td>
</tr>
<tr>
<td>0002</td>
<td>李四</td>
</tr>
<tr>
<td>0003</td>
<td>王五</td>
</tr>
<tr>
<td>0004</td>
<td>赵六</td>
</tr>
<tr>
<td>0005</td>
<td>李小可</td>
</tr>
<tr>
<td>0006</td>
<td>王萌</td>
</tr>
<tr>
<td>0007</td>
<td>小明</td>
</tr>
</tbody>
</table>
</body>
二,jQuery代码，对以上的表格进行编辑
$(function() {
//1,实现表格的隔行变色
//找到表格中所有的偶数行，也就是我们页面中看到的奇数行
$("tbody tr:even").css("background", "#EFF6FE");
//2,单元格值的修改
//找到所有需要编辑的单元格
var numTd = $("tbody td");
//给这些单元格注册Click事件
numTd.click(function() {
//精简上面的代码
//找到当前鼠标点击的那个td,this对应的就是响应了click的那个td
var currTd = $(this);
if (currTd.children("input").length > 0) {
//如果当前td中已包含有文本框元素，则不执行click事件
return false;
}
//当前td的内容
var tdtext = currTd.html();
//清除td的内容
currTd.html("");
//创建一个文本框
//去掉文本框的边框
//设置文本框中字体大小和当前td中的字体大小一样,为16px;
//设置文本框的背景色和当前td背景色一样
//让文本框的宽度和td的宽度一样
//将td的内容放到文本框中
//将文本框插入到td中去
var inputOjb = $("<input type='text' />").css("border-width", "0").css("font-size", "16px")
.css("background-color", currTd.css("background-color")).width(currTd.width())
.val(tdtext).appendTo(currTd);
//使文本框的内容添加后就被选中(trigger可以执行javascript中的方法)
inputOjb.trigger("focus").trigger("select");
//去掉文本框的点击事件,(javascript事件是冒泡型的)
inputOjb.click(function() {
return false;
});
//处理文本框上回车和ESC按键的操作
inputOjb.keyup(function(event) {
//获取当前按下的键盘的键值
// 不同的按键可以做不同的事情
var keyCode = event.which;
//处理回车键 ,不同的浏览器的keycode不同
if (keyCode == 13) {
//保存当前输入的内容
var inputText = $(this).val();
currTd.html(inputText);
}
//处理ESC键的操作
if (keyCode == 27) {
//将当前TD的内容还原成tdtext
currTd.html(tdtext);
}
});
});
})
分享到：
相关推荐
《jQuery仿Excel表格选中单元格变色特效详解》 在网页开发中，有时我们需要创建类似Excel的功能，比如用户能够选择表格中的单元格，并且选中的单元格有明显的视觉反馈，例如变色。jQuery作为一款强大的JavaScript库...
- `val()`方法用于获取或设置表单元素的值，例如`$('input').val()`可以获取或设置输入框的值，对于表格单元格，可能需要创建一个临时的输入框替换原有的单元格内容，用户输入后，再更新到单元格中。 4. **AJAX...
在本文中，我们将深入探讨如何使用jQuery实现一个仿Excel表格的选中单元格变色特效。这个功能允许用户在网页上的表格中通过鼠标操作选择单个或多个单元格，同时改变选中单元格的背景颜色，以模拟Excel的交互体验。 ...
在这个“jquery table rowspan 表格单元格合并Demo.zip”中，我们主要关注的是如何使用 jQuery 来实现 HTML 表格（`<table>`）中的 `rowspan` 属性来合并单元格，以创建更复杂、更有结构感的表格布局。 首先，`...
在某些场景下，我们可能需要对表格中的单元格进行合并，以便更好地展示数据，例如汇总或者分类。本篇将详细介绍如何使用jQuery DataTables结合JavaScript来实现相同内容单元格的动态合并。 首先，我们需要理解...
在实现表格中相同单元格合并时，JQuery可以方便地遍历表格单元格、比较单元格内容和动态修改DOM元素属性。单元格合并是数据展示的一种形式，常见于需要突出显示表格中相同数据的场景。 #### 二、表格中相同单元格...
《jQuery点击展开表格单元格代码实现详解》 在网页开发中，为了提升用户体验，我们经常需要为表格添加一些交互效果，比如点击单元格后展开更多详情。jQuery作为一个强大的JavaScript库，提供了丰富的API和方法，...
本主题聚焦于"jQuery表格预览设置单元格选中取值代码"，这涉及到如何利用jQuery来实现对表格（Table）中的单元格（Cell）进行操作，包括选中和获取其值，以及可能的预览功能。这里我们将深入探讨相关的jQuery技术和...
- 确保所有搜索相关的文本都是在表格单元格`<td>`内，而不是在`<th>`（表头）或其他元素中。 - 在表格结构中，`<tbody>`标签是必需的，因为插件会直接作用于`<tbody>`内的行。 - 如果表格数据是动态加载的，可能需要...
3. **监听用户交互**：使用jQuery的`.on()`方法监听表格单元格的`click`事件。当用户点击单元格时，我们可以激活编辑模式。 ```javascript $('table td[contenteditable]').on('click', function() { $(this)....
本文将深入探讨如何使用jQuery实现两个表格之间的数据行交换功能，这是一个常见的需求，特别是在用户界面设计中，用户可能需要重新排序或比较表格数据。 首先，让我们理解表格（TableView）的基本结构。在HTML中，...
本文将详细讲解如何利用jQuery实现表格预览，并设置单元格选中及取值的功能。 首先，我们需要理解jQuery的核心概念。jQuery通过$函数作为入口，可以快速选择DOM元素并进行操作。例如，`$("table")`会选择页面上的...
本篇文章将深入解析标题为"jQuery表格单元格列表展开收缩代码"的实践案例，它通过jQuery实现表格中单元格的展开和收缩功能，适用于数据展示、信息分类等场景。 首先，我们需要理解这个项目的基本结构。压缩包内包含...
本文将深入探讨“Excel样式表格单元格选择jQuery插件”的相关知识点，帮助开发者实现类似Excel的交互体验。 一、jQuery基础 在理解这个插件之前，我们首先要了解jQuery的基本概念。jQuery是由John Resig开发的，它...
例如，创建一个表格（table）和表格行（tr）以及表格单元格（td）的代码可能如下： ```javascript var $table = $('<table></table>'); $table.append('<tr><td>单元格1</td><td>单元格2</td></tr>'); ``` 接着，...
在IT领域，jQuery是一款...总的来说，这个压缩包提供了实现动态表格排序的jQuery代码示例，对于学习和提升网页开发中的交互体验非常有价值。通过理解和实践这些知识点，开发者可以创建更高效、用户友好的数据展示界面。
本文将深入探讨如何使用jQuery创建动态表格，这是一个常见的需求，特别是在数据展示和用户交互丰富的Web应用中。 首先，让我们理解动态表格的基本概念。动态表格指的是在网页加载后或用户操作时根据需要生成或更新...
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...