jQuery逐步实现跨浏览器可编辑表单 支持IE、火狐、Safari、Chrome、Opera

要实现可编辑表格功能，需要解决以下几个问题：1 .确定表中要修改的数据列(如何找到这些单元格)；2.如何使单元格可编辑；3.如何处理细胞的一些关键事件；4.解决跨浏览器问题。我们可以通过jQuery逐步解决上述问题。首先，画一张桌子。首先，我们画一张桌子。代码1:复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8'/titlejQuery的跨浏览器可编辑表/title linkrel='样式表'类型=' text/CSS ' href=' CSS/edittable . CSS ' media=' all '/script类型=' text/JavaScript ' src=' http : js/jquery-1 . 3 . 2 . min . js '/script类型=' text/JavaScript ' src=' http 3360 js/edittable . js '/script

显然，它看起来不像一张桌子。它没有边界，很丑。那么让我们先为这张桌子设置一些风格。Code2:复制代码如下： body { } { font-size : 14px；} table { } { color: # 4F6B72border: 1px固体# C1DAD7边界崩溃：崩溃；宽度： 400 px；} th { } { width : 50%；border: 1px固体# C1DAD7} TD { } { width : 50%；border: 1px固体# C1DAD7}现在效果好多了：editTable02.jpg(9501 . 163.com)。

但是单元格之间还是有重叠的边框，只需要在标签选择器表中添加这样一个属性就可以去掉重复的边框：border-collapse : collapse；复制的代码如下： table { } { color : # 4f6b 72；border: 1px固体# C1DAD7边界崩溃：崩溃；宽度： 400 px；} editTable03.jpg

其次，让表格的单元格成为可编辑的列。绘制完表格后，我们选择表格中的编号列作为可编辑列。要使此列中的单元格可编辑，我们需要在这些列中插入文本框。我们通过该列中单元格的onclick事件插入文本框。代码3:复制代码如下： $(文档)。ready(function(){//查找学号列中的所有单元格//因为学号列中的单元格在所有td(0，2，4，6)中都是偶数，所以TD中的偶数单元格可以过滤为varnum TD=$ ('tbodytd333)。//当您单击这些tds时，创建一个文本框numTd.click(function(){ //创建一个文本框对象var input tobj=$(' input type=' text ' ')；//获取当前点击的单元格对象var tdobj=$(this)；//从文本框中删除border input tobj . CSS(' border '，' 0 ')；//保持文本框和单元格的宽度与input tobj . width(tdobj . width())一致；//让文本框的字体和单元格的字体大小与input tobj . CSS(' font-size '，tdobj.css ('font-size ')相同；//保持文本框和单元格的字体与input BoJ . CSS(' font-family '，tdobj.css ('font-family ')一致；//保持文本框和单元格的背景与input BoJ . CSS(' background-color '，tdobj.css ('background-color ')一致；//appendo方法将文本框添加到td中的input BoJ . appendo(TD obj)中；});});现在文本框已经插入到单元格中。因为我们要编辑文本框，所以文本框应该有一个值，文本框的值来自单元格中的数据，我们需要清空单元格中的原始数据。代码4:复制代码如下： $(文档)。ready(function(){//查找学号列中的所有单元格//因为学号列中的单元格在所有td(0，2，4，6)中都是偶数，所以TD中的偶数单元格可以过滤为varnum TD=$ ('tbodytd333)。//当您单击这些tds时，创建一个文本框numTd.click(function(){ //创建一个文本框对象var input tobj=$(' input type=' text ' ')；//获取当前点击的单元格对象var tdobj=$(this)；//获取单元格中的文本var text=tdobj.html()；//清除单元格的文本tdobj.html(')；//从文本框中删除border input tobj . CSS(' border '，' 0 ')；//保持文本框和单元格的宽度与input tobj . width(tdobj . width())一致；//让文本框的字体和单元格的字体大小与input tobj . CSS(' font-size '，tdobj.css ('font-size ')相同；//保持文本框和单元格的字体与input BoJ . CSS(' font-family '，tdobj.css ('font-family ')一致；//保持文本框和单元格的背景与input BoJ . CSS(' background-color '，tdobj.css ('background-color ')一致；input BoJ . CSS(' color '，' # C75F3E ')；//将input tobj . val(文本)分配给文本框；//appendo方法将文本框添加到td中的input BoJ . appendo(TD obj)中；});});但是上面的代码看起来非常繁琐，jQuery有一个非常好的优势，那就是它的代码链接。上面的代码可以通过串联来简化：Code5: Copy代码如下： $(文档)。ready(function(){//查找学号列中的所有单元格//因为学号列中的单元格在所有td(0，2，4，6)中都是偶数，所以TD中的偶数单元格可以通过偶数进行过滤。//当您单击这些tds时，创建一个文本框numTd.click(function(){ //创建一个文本框对象var input tobj=$(' input type=' text ' ')；//获取当前点击的单元格对象var tdobj=$(this)；//获取单元格中的文本var text=tdobj.html()；//清除单元格的文本tdobj.html(')；input BoJ . CSS('边框'，' 0 ')。css('font-size '，tdobj.css('font-size ')。css('font-family '，tdobj.css('font-family ')。css('背景色'，tdobj.css('背景色')。css('color '，' #C75F3E ')。width(tdobj.width())。val(文本)。appendo(TD obj)；});});现在文本框已经成功插入到表格中，可以编辑单元格了。editTable04.jpg

但是有一个明显的bug。当你再次点击同一个单元格时，会出现如下效果：editTable05.jpg(9504 . 163.com)。

是什么导致了上面的bug？因为在文本框中插入单元格后，文本框属于单元格，所以当我们点击文本框时，单元格的点击事件也会被触发。我们需要防止文本框的点击行为(防止事件冒泡)。Code6:复制代码如下： inputobj。单击(function(){ return false；});但是，当你点击单元格的边框时，上面的bug还是会出现。然后我们会做出如下判断：如果单元格中已经插入了文本框，点击事件就会弹出。代码7:复制代码如下： $(文档)。ready(function(){//查找学号列中的所有单元格//因为学号列中的单元格在所有td(0，2，4，6)中都是偶数，所以TD中的偶数单元格可以过滤为varnum TD=$ ('tbodytd333)。//当您单击这些tds时，创建一个文本框numTd.click(function(){ //创建一个文本框对象var input tobj=$(' input type=' text ' ')；//获取当前点击的单元格对象var tdobj=$(this)；//获取单元格中的文本var text=tdobj.html()；//如果当前单元格中有文本框，直接跳出方法。//注意：插入文本框前一定要判断if (tdobj。子代(' input ')。length 0){ return false；}//清空单元格文本tdobj.html(“”)；input BoJ . CSS('边框'，' 0 ')。css('font-size '，tdobj.css('font-size ')。css('font-family '，tdobj.css('font-family ')。css('背景色'，tdobj.css('背景色')。css('color '，' #C75F3E ')。width(tdobj.width())。val(文本)。appendo(TD obj)；input bj . get(0)。select()；//阻止click事件inputobj。单击(function(){ return false；});});});上面的bug解决了，但是我发现当我点击单元格的时候，虽然文字表面变了颜色，但是并没有让我觉得可以编辑。然后我会做一点小改动，插入文本框，选择文本框中的文字。代码8:复制代码如下： input BoJ . get(0)。select()；但问题来了。在Safari中，如果您想要选择文本框，您必须出现以让文本框获得焦点。但是，当我们单击一个单元格时，我们会插入一个文本框并为该文本框赋值，但该文本框不会获得焦点。解决方案：通过jQuery的触发器方法触发事件。Code9:复制代码如下： inputobj。触发器(“焦点”)。触发器(' select ')；三、文本框按钮事件的处理这些问题都已经解决了，接下来我们就给文本框添加一些按钮事件。我们知道不同的浏览器获得不同的键码，但是jQuery帮助我们解决了这个问题。只需要在事件的函数中加入事件参数，然后通过方法体中事件对象的what属性和事件就可以得到keyCode。该属性吸收了不同浏览器获取键码的方法。拿到键码后，我主要做两个按键事件：ESC键(键值：27)和回车键(键值：13)。

Code10:复制的代码如下： //处理文本框上Enter和esc键的操作//jQuery中事件方法的功能可以定义一个事件参数，jQuery会屏蔽浏览器的差异。向我们传递一个可用的事件对象inputobj。keyup(function(event){//获取当前键的键值///jQuery的事件对象有一个has属性来获取keyboard的键值var keycode=event.which//处理回车if(keycode==13){ //获取当前文本框var inputtext=$(this)的内容。val()；//将td的内容修改为文本框中的TD obj . html(input text)；}//处理esc if(keycode==27){ //将td中的内容还原为text tdobj . html(text)；} });以下是完整的js代码：Code11: Copy代码如下： $(文档)。ready(function(){//查找学号列中的所有单元格//由于学号列中的单元格在所有td(0，2，4，6)中都是偶数，所以TD中的偶数单元格可以通过偶数进行过滤。//当您单击这些tds时，创建一个文本框numTd.click(function(){ //创建一个文本框对象var input tobj=$(' input type=' text ' ')；//获取当前点击的单元格对象var tdobj=$(this)；//获取单元格中的文本var text=tdobj.html()；//如果当前单元格中有文本框，直接跳出方法。//注意：插入文本框前一定要判断if (tdobj。子代(' input ')。length 0){ return false；}//清空单元格文本tdobj.html(“”)；input BoJ . CSS('边框'，' 0 ')。css('font-size '，tdobj.css('font-size ')。css('font-family '，tdobj.css('font-family ')。css('背景色'，tdobj.css('背景色')。css('color '，' #C75F3E ')。width(tdobj.width())。val(文本)。appendo(TD obj)；input bj . get(0)。select()；//阻止click事件inputobj。单击(function(){ return false；});//处理文本框上enter和esc键的操作。//jQuery中事件方法的功能可以定义事件参数，jQuery会屏蔽浏览器差异。向我们传递一个可用的事件对象inputobj。keyup(function(event){//获取当前键的键值///jQuery的事件对象有一个has属性来获取keyboard的键值var keycode=event.which//处理回车if(keycode==13){ //获取当前文本框var inputtext=$(this)的内容。val()；//将td的内容修改为文本框中的TD obj . html(input text)；}//处理esc if(keycode==27){ //将td中的内容还原为text tdobj . html(text)；} });});});打包下载相关文档。