转：基于jquery的高性能td和input切换并可修改内容实现代码

longyangyangyang

于 2011-01-13 04:21:00 发布

阅读量1.6k

点赞数

分类专栏： jquery 文章标签： input jquery function border character html

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在网页表格中实现高效数据编辑的方法。通过将输入框动态添加到表格单元格，提高了用户编辑体验，并支持键盘导航及快捷键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际工作中，我们会碰到这样一个情况。在页面中显示着100个数据，同时用户还希望他可以更改其中的数据，普通的方式可能如下，

这种方式会出现一个问题，就是页面显示的时候有点慢，同时如果有滚动条的话，会有些卡。下面给出我的一个解决方法，显示的时候全是td的，没有input标签，如下

当你点击其中一个td时，就会出现下面这样

当你点击td的时候，会在td动态加入一个input同时把td的值赋给input，当你鼠标离开input时，会把input的值赋给td。同时支持回车，上下方向键，进行向右，上下移动。

可以对这个做一些扩展，做出一些很实际的功能，（对大批量数据编辑等等）

代码，

tdchange.js

var tbid = "#tableList"; var inputfomate = "<input type='text'/>"; var pre = null; var tdinputselection=""; function getSelectionStart(o) { if (o.createTextRange) { var r = document.selection.createRange().duplicate(); r.moveEnd('character', o.value.length); if (r.text == '') return o.value.length return o.value.lastIndexOf(r.text); } else return o.selectionStart; } function getSelectedText() { if (window.getSelection) { return window.getSelection().toString(); } else if (document.getSelection) { return document.getSelection(); } else if (document.selection) { return document.selection.createRange().text; } } $(function() { $(tbid).mouseover(function(e) { stopevent(e); var cur = e.target; if ($(cur).is("td")) { switchtdinput(cur); } }); $(tbid).find("tr").each(function() { $(this).find("td").each(function(i) { $(this).data("i", i); }); }); }); function switchtdinput(obj) { if (pre) doinpleave(pre); var width = $(obj).width() * 0.75; var objtxt=$.trim($(obj).text()); $(obj).html($(inputfomate).val(objtxt)); pre = $(obj).find('input').css("border", "#C2DDE6 1px solid").width(width)[0]; $(obj).find('input').trigger("focus").trigger("select"); $(obj).find('input').click(function(event) { stopevent(event); return false; }).blur(function(event) { inpleave(event, this); }).keypress(function(event) { stopevent(event); }).keyup(function(event) { return setpreornext(event, this); }).keydown(function(event) { tdinputselection=getSelectedText(); stopevent(event); }); } function stopevent(event) { event.stopPropagation(); } function inpleave(event, obj) { stopevent(event); doinpleave(obj); } function doinpleave(obj) { if (!obj) return; var val = $(obj).val(); var $par = $(obj).parent()[0]; $($par).text(val); pre = null; } function setpreornext(event, objThis) { var count = -1; stopevent(event); var obj; if (event.keyCode == 40 || event.which == 40 || event.keyCode == 38 || event.which == 38 || event.keyCode == 13 || event.which == 13|| event.keyCode == 37 || event.which == 37|| event.keyCode == 39 || event.which == 39) { count = parseInt($(objThis).parent().data("i")); if (event.keyCode == 40 || event.which == 40) { obj = $(objThis).parent().parent().next("tr").find("td").get(count); } else if (event.keyCode == 38 || event.which == 38) { obj = $(objThis).parent().parent().prev("tr").find("td").get(count); } else if (event.keyCode == 13 || event.which == 13) { obj = $(objThis).parent().parent().find("td").get(count + 1); } else if (event.keyCode == 37 || event.which == 37) { if(getSelectionStart(objThis)==0&&(tdinputselection!=$(objThis).val())){ obj = $(objThis).parent().parent().find("td").get(count - 1); } } else if (event.keyCode == 39 || event.which == 39) { if(getSelectionStart(objThis)==$(objThis).val().length&&(tdinputselection!=$(objThis).val())) obj = $(objThis).parent().parent().find("td").get(count + 1); } if (obj) { doinpleave(objThis); switchtdinput(obj); } } if (event.keyCode == 13 || event.which == 13) return false; else return true; }

html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <mce:script src="flexigrid_my/jquery-1.3.2.min.js" mce_src="flexigrid_my/jquery-1.3.2.min.js" type="text/javascript"></mce:script> <mce:script type="text/javascript" src="tdchange.js" mce_src="tdchange.js"></mce:script> </head> <body> <div> <table cellpadding="3" border="1" rules="all" cellspacing="0" bordercolor="black" style="border-collapse: collapse" mce_style="border-collapse: collapse" id="tbcontainer"> <tbody> <tr> <td> 121313 </td> <td> 121313 </td> <td> 121313 </td> <td> 121313 </td> </tr> <tr> <td> 121313 </td> <td> 121313 </td> <td> 121313 </td> <td> 121313 </td> </tr> </tbody> </table> </div> </body> </html>

在线演示地址http://demo.jb51.net/js/td_input_edit/index.htm
打包下载地址http://xiazai.jb51.net/201101/yuanma/td_input_edit.rar

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。