一,以下是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代码，可以完美运行，有能力的还可以二次修改！
NULL 博文链接：https://zjriso.iteye.com/blog/897555
使用jQuery实现动态可编辑表格，代码更少，兼容性更好
ayGrid是一个基于jQuery的表格插件，可实现在表格上在线修改、增加、删除、保存数据！其中，单元格的编辑可以实现CheckBox、ComboBox、Input的输入方式。表格数据传输基于JSON。
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
在前台的表格中单击单元格便可修改其中的内容，...原理：单击客户端表格单元格时，在单元格中添加一个文本框，并将单元格中原来的内容赋值给文本框，再进一步去修改文本框内容，修改后将文本框内容重新赋值给单元格。
对表格进行增删改后一次性保存或回滚的发生相当有用。参照官方的教程例子做了个用户管理的小例子。
这是一款十分简单的jQuery+PureCSS实现的可编辑表格插件，点击table表格的单元格对文字内容进行修改，再在单元格外随意点击一下即可保存。
jquery easy ui edatagrid 动态编辑表格 下拉框 联动 ，支持增加，编辑，删除行，日期狂，下拉框联动显示数据，测试ok
原理：单击客户端表格单元格时，在单元格中添加一个文本框，并将单元格中原来的内容赋值给文本框，再进一步去修改文本框内容，修改后将文本框内容重新赋值给单元格。 源码： 前台代码： 代码如下: <%@ Page ...
本文实例讲述了JQuery实现可直接编辑的表格。分享给大家供大家参考。具体分析如下： 功能： 创建一个表格，用户单击某个单元格后，可以直接修改单元格文本。 在编辑状态下，用户可按回车键确认修改，按ESC键撤销修改...
6.24 设计可改变单元格宽度并可以多选的表格 第7章 jQuery操作图形图像 7.1 如何更好地处理图片法显示问题 7.2 如何显示图片直到页面加载完成 7.3 预加载显示图片的方法 7.4 Facebook风格的图片预加载 7.5 检查图片...
google code上的一个开源项目源码、实例...当在一个日期单元格中有比较多的待办事项时，将出现一个更多的链接，点击这个链接会弹一个jQuery模式对话框来显示所有的事务。这个日历还支持通过CSS文件改变整个日历的背景。
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。 使用说明 引入jquery.tablesorter 所用文件下载： ...
合并数据表格单元格 创建自定义视图 创建数据表格页底摘要 条件设置数据表行背景 创建折叠数据表格 折叠数据表格应用 折叠数据表格中套用数据表格 数据表格处理海量数据方法 窗口应用 创建简单...
内容索引:脚本资源,jQuery,动态删除 jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
jqGrid是基于jquery的一个表格插件，demo中可自适应窗口大小，且单元格数据较多时，可单行显示
明确要修改的数据在表格中是哪些列（如何找到这些单元格）; 2.如何让单元格变成可以编辑的; 3.如何处理单元格的一些按键事件; 4.解决跨浏览器问题。 我们通过jQuery可以一步一步解决上述问题。 一、 绘制表格 首先...
该表格实现了单双行不同颜色的显示，单击表格单元格时，单元格变为可编辑的状态，按Esc取消表格的修改，回车提交表格内容。使用了JQuery语言。