<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery:可以编辑的表格</title>
<link type="text/css" rel="stylesheet" href="css/editTable.css">
<script type="text/javascript" src="js/jquery-1.3.2.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>00001</td>
<td>张3</td>
</tr>
<tr>
<td>00002</td>
<td>李4</td>
</tr>
<tr>
<td>00003</td>
<td>王5</td>
</tr>
<tr>
<td>00004</td>
<td>赵6</td>
</tr>
</tbody>
</table>
</body>
</html>
editTable.js文件
//通过javascript来解决内容部分的奇偶行背景不同
/*
$(document).ready(function(){
});*/
//简化写法
$(function() {
//找到表格的内容区域的奇数行,设定其样式
$("tbody tr:even").css("background-color", "#ECE9D8");
//找到所有学号的单元格
var numTd = $("tbody td:even");
//给这些单元格注册鼠标点击的事件。
numTd.click(function() {
//找到当前的td,this对应的就是相应可cilck的那个td
var tdObj = $(this);
if(tdObj.children("input").length()>0){
//表示里面是有input的文本框，不执行click处理
return false;
}
//取出当前td中的文本值
var text = tdObj.html();
//清空td中的内容
tdObj.html("");
//创建一个文本框
//去掉文本框的边框
//设置文本框的文字字体大小是16px
//使文本框的宽度，和td宽度相同
//设置文本框的背景色
//需要将当前td中的内容，放到文本框中
//将文本框插入到td中，
var inputObj = $("<input type = 'text'>")
.css("border-width", "0")
.css("font-size", "16px")
.width(tdObj.width())
.css("background-color", tdObj.css("background-color"))
.val(text)
.appendTo(tdObj);
//是文本框插入之后被选中
inputObj.get(0).select();
inputObj.click(function(){
return false;
});
//处理文本框上回车和ESC按键的操作
inputObj.keyup(function(event){
//获取当前按键下的键值
var keycode = event.which;
//处理回车的情况
if(keycode == 13){
//获取当前文本框中的内容
var inputtest = $(this).val();
tdObj.html(inputtest);
}
//处理esc的情况
if(keycode == 27){
tdObj.html(text);
}
});
});
});
分享到：
相关推荐
此外，对于可编辑表格，我们还需要考虑数据验证、错误提示、格式化等功能，这些可以通过添加额外的jQuery代码来实现。例如，可以使用`change`事件来实时验证输入，并通过`addClass()`和`removeClass()`改变单元格的...
通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a
这篇名为“JQuery实现可编辑表格”的博客文章可能深入探讨了如何利用jQuery的功能来创建一个用户可以编辑的表格。在网页设计中，这种功能常用于数据输入或管理应用程序，允许用户直接在表格内修改数据而无需跳转到...
在本项目中，Vue将用于处理商品属性的添加、编辑和删除，以及根据用户选择生成表格。 jQuery则是一个强大的JavaScript库，主要用于DOM操作、事件处理和动画效果。在这个场景下，jQuery可能被用来简化DOM操作，例如...
在这个“jquery添加表格行内编辑代码.zip”压缩包中，包含了一个使用jQuery实现的表格行内编辑功能的示例。下面将详细解释这个功能的实现原理和涉及的技术点。 首先，`demo.html`是主页面文件，它通常会包含HTML...
2. **创建可编辑表格**：设置表格单元格为可编辑，可以通过添加`contenteditable`属性实现。例如： ```html 初始数据 ``` 3. **监听用户交互**：使用jQuery的`.on()`方法监听表格单元格的`click`事件。当用户...
在实际应用中，你可能还需要考虑表格的样式和布局，这可以通过CSS来实现。可以为`<table>`、`<tr>`、`<th>`和`<td>`添加类名，然后在CSS文件中定义相应的样式规则。 综上所述，利用jQuery生成表格的核心在于理解和...
6. **AJAX交互**：结合jQuery的`.ajax()`方法，可以实现表格数据的异步加载和更新，比如从服务器拉取或提交数据。 7. **插件扩展**：jQuery有许多用于表格操作的插件，如Datatables，它可以提供排序、过滤、分页等...
【jq富文本插件编辑器】是一款用于...总的来说，这款jq富文本插件编辑器结合jQuery和LayUI，为开发者提供了一种简单易用的方法来实现网页的文本编辑功能，无论是框架还是原生环境，都能轻松集成，提升项目的用户体验。
《使用jQuery实现类似Excel的Web表格》 在Web开发中，有时我们需要在网页上展示大量数据，并且希望用户能够进行类似Excel的操作，如编辑、排序、筛选等。这时候，使用jQuery来实现一个类Excel的表格就显得尤为重要...
5. **丰富的API和事件**：提供丰富的API接口和事件回调，开发者可以通过这些接口实现与表格的交互，如排序、筛选、编辑等操作。 6. **插件扩展**：作为jQuery插件，tilesjs可以与其他jQuery插件无缝集成，如数据...
"jq文本编辑器"充分利用了jQuery的这些特性，提供了一套完整的工具栏，包括字体设置、字号调整、文本对齐、插入图片、链接创建、表格操作等常见功能，使得用户可以直接在浏览器中进行类似桌面文字处理软件的操作。...
这个“JQ实现DIV大小、位置拖动调整源码”是一个基于jQuery的解决方案，它使得开发者能够为网页上的元素添加动态的拖放功能，提升用户体验。 jQuery（简称JQ）是一个轻量级的JavaScript库，它简化了HTML文档遍历、...
"jQuery表格编辑添加删除行代码"就是针对这一需求提供的一种解决方案，它利用JavaScript库jQuery的强大功能，实现了在表格中对数据进行编辑、添加和删除等操作。本文将详细解析这一代码实现的原理和应用。 首先，...
editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作，其中可以设置参数，如： operatePos 用于设置放置操作的列，从0开始，-1表示以最后一列作为放置操作的列；（这里的操作包括 编辑当前行、在当前行下...
可编辑的类似于excel功能的jQuery开发的表格，功能上还有很多的缺陷，望网上的各位牛人大哥们。帮小弟优化一下。并完善其功能 现在可以实现，添加或附加行列，删除行和列。简单的合并行或列。现在想将其添加到...
通过以上步骤，你可以构建一个允许用户直接在表格单元格内编辑数据的交互式Web应用。不过，需要注意的是，jqGrid虽然强大，但其社区支持和更新已不如以前活跃，现在有更多现代的前端框架如React、Vue和Angular提供了...
本文将详细介绍如何使用 jQuery 来实现一个双击编辑表格的功能。 首先，我们需要一个基本的 HTML 结构来创建表格。虽然在提供的描述中没有给出具体的 HTML 代码，但可以假设我们有如下结构： ```html 数据1 ...