jQuery实现可编辑的表格实例讲解(2)


Posted in Javascript onSeptember 17, 2015

本文实例为大家分享了jQuery实现可编辑表格的具体代码,供大家参考,具体内容如下

我们最终要达到的效果如下:

jQuery实现可编辑的表格实例讲解(2)

当单击学号列的时候,可以进行编辑:

jQuery实现可编辑的表格实例讲解(2)

当单击ESC的时候,操作取消,当单击回车的时候,修改生效(没有与后台交互)
页面代码如下(asp.net):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <link href="css/eidtTable.css" rel="stylesheet" type="text/css" /> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/eidtTable.js" type="text/javascript"></script> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
 <table> 
 <thead> 
 <tr> 
 <th colspan="2">可编辑的表格</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <th>学号</th> 
 <th>姓名</th> 
 </tr> 
 <tr> 
 <td class="editTd">00001</td> 
 <td>小明</td> 
 </tr> 
 <tr> 
 <td class="editTd">00001</td> 
 <td>小明</td> 
 </tr> 
 <tr> 
 <td class="editTd">00001</td> 
 <td>小明</td> 
 </tr> 
 <tr> 
 <td class="editTd">00001</td> 
 <td>小明</td> 
 </tr> 
 </tbody> 
 </table> 
 </div> 
 </form> 
</body> 
</html>

CSS(eidtTable.css)

table 
{ 
 border:1px solid black; 
 border-collapse:collapse; 
 width:500px; 
 } 
table th 
{ 
 border:1px solid black; 
 width:50%; 
 } 
table td 
{ 
 border:1px solid black; 
 width:50px; 
 } 
tbody th 
{ 
 background-color:#A3BAE9 
 }

JS(eidtTable.js):

/// <reference path="jquery-1.9.1.min.js" /> 
 
//$(document).ready(function () { 
// alert('test'); 
//}); 
 
//简便的写法 
$(function () { 
 $("tr:odd").css("background-color", "#ECE9D8"); 
 var objTd = $(".editTd"); 
 
 objTd.click(function () { 
 var text = $(this).html(); 
 var objThisTd = $(this); 
 
 //解决点击文本框和td中间的空隙还是会出问题 这个问题 
 if (objThisTd.children("input").length > 0) { 
 return false; 
 } 
 
 var inputText = $("<input value='test' type='text'/>"); 
 
 inputText.width(objTd.width()).css("font-size", "16px").css("background-color", objTd.css("background-color")).css("border-width", "0").val(text); 
 
 objThisTd.html(""); 
 inputText.appendTo(objThisTd); 
 
 inputText.trigger("focus").trigger("select"); 
 
 inputText.click(function () { 
 return false; 
 }); 
 
 //这里采用的keydown事件,我试过用keyup事件无法屏蔽浏览器的回车页面提交事件 
 inputText.keydown(function (event) { 
 //alert(event.keyCode); 
 var keycode = event.which; 
 if (keycode == 13) { 
 objThisTd.html($(this).val()); 
 //return false; 
 } 
 if (keycode == 27) { 
 objThisTd.html(text); 
 } 
 }); 
 }); 
 
 
});

以上就是实现可编辑的表格全部代码,希望大家可以仔细研究,应用到自己的网站上。

Javascript 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
node中的密码安全(加密)
Sep 17 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
mocha的时序规则讲解
Feb 16 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
JQuery入门基础小实例(1)
Sep 17 #Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 #Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 #Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 #Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 #Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 #Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP模块memcached使用指南
2014/12/08 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
python 绘制正态曲线的示例
2020/09/24 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
党员教师工作决心书
2014/03/13 职场文书
买卖协议书范本
2014/04/21 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL