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

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

当单击学号列的时候，可以进行编辑：

当单击经济社会委员会的时候，操作取消，当单击回车的时候，修改生效（没有与后台交互)页面代码如下(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/XHTML 1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title link href=' CSS/EIT table。CSS ' rel='样式表type=' text/CSS '/script src=' HTT可编辑的表格/th/tr/t带体tr th学号/th姓名/th/tr/tr TD class=' editTd ' 00001/TD TD小明/TD/tr/tr TD类=' editTd ' 00001/TD TD TD小明/TD/tr/tr TD类=' editTd ' 00001/TD TD TD小明/TD/tr/tr TD类=' editTd ' 00001/TD TD TD小明/TD/tr/t body/table/div/form/body/html CSS(EidtTable。CSS)

表格{ border:1px纯黑；边框塌陷：宽度宽度：500px}表格th { border:1px纯黑；宽度：50%;}表格td { border:1px纯黑；宽度：50 px} t body th {底色： # A3BAE 9 } JS(EidtTable。JS):

///引用路径='jquery-1.9.1.min.js'///$(文档)。ready(function(){//alert(' test '))；//});//简便的写法$(function () { $('tr:odd ')).css(“”背景色，' # ECE9D 8 ')；var objTd=$(' .editTd’)；objtd。点击(函数(){ var text=$(this)).html()；var objThisTd=$(this)；//解决点击文本框和任务描述中间的空隙还是会出问题这个问题if (objThisTd.children('input ').长度0){返回false} var InputText=$(' input value=' test ' type=' text '/')；inputText.width(objTd.width()).css('字号'，' 16px ').css(“”背景色，objTd.css('背景色')。css(“”边框宽度',' 0 ')。val(文本);objthistd。html(" ")；输入文本。appendo(Objthistd)；inputText.trigger(焦点).触发器(“选择”)；输入文本。单击(function(){ return false；});//这里采用的按键事件，我试过用按键事件无法屏蔽浏览器的回车页面提交事件inputText.keydown(函数（事件){ //alert(事件。键码)；var key code=event . what if(key code==13){ Objthistd。html($(this).val())；//返回false} if(键码==27){ Objthistd。html(文本)；} });});});以上就是实现可编辑的表格全部代码，希望大家可以仔细研究，应用到自己的网站上。