<script>
$(function(){
//找到所有的td节点
var tds=$("td");
//给所有的td添加点击事件
tds.click(function(){
//获得当前点击的对象
var td=$(this);
//取出当前td的文本内容保存起来
var oldText=td.text();
//建立一个文本框,设置文本框的值为保存的值
var input=$("<input type='text' value='"+oldText+"'/>");
//将当前td对象内容设置为input
td.html(input);
//设置文本框的点击事件失效
input.click(function(){
return false;
});
//设置文本框的样式
input.css("border-width","0");
input.css("font-size","16px");
input.css("text-align","center");
//设置文本框宽度等于td的宽度
input.width(td.width());
//当文本框得到焦点时触发全选事件
input.trigger("focus").trigger("select");
//当文本框失去焦点时重新变为文本
input.blur(function(){
var input_blur=$(this);
//保存当前文本框的内容
var newText=input_blur.val();
td.html(newText);
});
//响应键盘事件
input.keyup(function(event){
// 获取键值
var keyEvent=event || window.event;
var key=keyEvent.keyCode;
//获得当前对象
var input_blur=$(this);
switch(key)
{
case 13://按下回车键,保存当前文本框的内容
var newText=input_blur.val();
td.html(newText);
break;
case 27://按下esc键,取消修改,把文本框变成文本
td.html(oldText);
break;
}
});
});
});
</script>
分享到:
相关推荐
jquery可编辑表格插件,简单好用,做列表时一个非常不错的选择
jquery可编辑表格代码实现
JQuery实现的简单可编辑表格,其中的数据可以根据需要从数据里读取,这里暂时写成静态的,只是为了演示一下JQuery的方便之处。
JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx
JQuery可编辑表格、横向纵向菜单、标签页、级联下拉框、窗口
一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。
jQuery 可编辑表格, 使用 Jqrery 快速实现表格的编辑功能,单击修改表格内容,样式可调。轻量级的 H5代码。
JQuery实现可编辑的表格JQuery实现可编辑的表格
本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...
jQuery实现可编辑化的表格,有兴趣的可以看看
代码片段: 姓名 性别 年龄 电话 操作 <td colspan="5" class="danger"><button class="btn btn-primary btn-sm">增加</button></td> </table>
有兴趣刚需的可以自己下载,非常实用的代码,可以完美运行,有能力的还可以二次修改!
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
jquery可编辑表格可以对表格进行无刷新的编辑
jQuery+Bootstrap表格内容修改删除编辑插件,随便传的
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。
DataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zip