<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery示例:可编辑table</title>
<link type="text/css" rel="stylesheet" href="css/edit.css"/>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
<!--简单表格，一行两列，期望表格数据点击可修改-->
<table>
<tbody>
<tr>
<td>hello</td>
<td>world</td>
</tr>
</tbody>
</table>
</body>
</html>
//页面载入时，让td都有一个oncllick事件
$(document).ready(function(){
//找到所有td节点
var tds = $("td");
//给所有td节点添加点击事件
tds.click(tdclick);
});
//td被点击的事件
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);
//4.5让文本框可以响应键盘按下并弹起的事件
input.keyup(function(event){
//0 获取当前用户按下的键值
//截取不同浏览器获取事件对象的差异
var myEvent = event || window.event;
var kcode = myEvent.keyCode;
//1 判断是否是回车按下
if(kcode == 13){
var inputnode = $(this);
//2 获取当前文本框的内容
var inputtext = inputnode.val();
//3 清空td里面的内容
var tdNode = inputnode.parent();
//4 保存文本框的内容填充到td中
tdNode.html(inputtext);
//5 让td重新拥有点击事件
tdNode.click(tdclick);
}
});
//5 将文本内容加入td
td.append(input);//也可input.appendto(td)
//5.5让文本框文字被高亮选中
//需要将jquery的对象转换成dom对象
var inputdom = input.get(0);
inputdom.select();
//6 需要清除td上的点击事件
td.unbind("click");
}
分享到：
相关推荐
jqueryTable编辑的实现 鼠标点击表格即可编辑，onblur时候出发Ajax时间 保存数据（带娇艳功能）。
jquery将table表格变成可编辑，解压压缩包，双击html页面即可看效果
HTML5+jquery 可编辑Table表格
* edit - 表格可编辑 效果 * septalLine even, 单行样式背景 隔行背景变色显示数据 效果 odd 双行样式背景 * glide tableStyle, table样式 table滑动样式 效果 hoverStrle, ...
Jquery实现表格的可编辑，可以随时改变表格中的内容并保存。
jquery可编辑表格，jquery实战，table
NULL 博文链接：https://alvin198761.iteye.com/blog/1583958
jquery实现table自动添加行和编辑
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
使用jQuery实现动态可编辑表格，代码更少，兼容性更好
利用JQuery,实现一个可编辑的表格，同时可以修改表格内容！
于是就是网上找js excel插件，找到了几个做的都不错，但是都是收费的，不敢使用，其实我们要求的功能不是那么麻烦，于是决定自己写一个能支持粘贴复制，并且可编辑的jquery表格小插件。先看demo：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码，jQuery表格添加删除行数据代码，使用起来十分的方便。
NULL 博文链接：https://xiaomaha.iteye.com/blog/1106606
jQuery+Bootstrap表格内容修改删除编辑插件，随便传的
jQuery获取table下某一行某一列的值实现代码 最近需要获取到某个table下每一行某一列的值，用jQuery做了一会儿，过程如下，仅供参考： <table name=info><tr><td>lily<span>okok</span></td></tr><tr><td>18...
这是一款十分简单的jQuery+PureCSS实现的可编辑表格插件，点击table表格的单元格对文字内容进行修改，再在单元格外随意点击一下即可保存。
<table class="table table-bordered table-hover"> 姓名 性别 年龄 电话 操作 <td colspan="5" class="danger"><button class="btn btn-primary btn-sm">增加</button></td> </table>
NULL 博文链接：https://jacobguan.iteye.com/blog/1002538