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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js中eval详解
Mar 30 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
JS+CSS实现3D切割轮播图
Mar 21 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
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP与以太坊交互详解
2018/08/24 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
python将秒数转化为时间格式的实例
2018/09/16 Python
Django 路由系统URLconf的使用
2018/10/11 Python
python的slice notation的特殊用法详解
2019/12/27 Python
详解Python设计模式之策略模式
2020/06/15 Python
python开根号实例讲解
2020/08/30 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
物业管理专业自荐信
2014/07/01 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
个人优缺点总结
2015/02/28 职场文书
新年晚会开场白
2015/05/29 职场文书
《确定位置》教学反思
2016/02/18 职场文书
java代码实现空间切割
2022/01/18 Java/Android