漂亮的JQuery可编辑表格

发表于 2010年6月1日由 kily

edittable

可编辑表格在网页开发中非常常见，尤其是与后台做Ajax应用。花了点时间学习了下这种表格的制作方法，有JQuery的时候一切都是那么简单。如果换成纯JavaScript的话一系列的DOM操作的确相当繁琐，JQuery中实现起来却异常简单。

核心JQuery代码在这里：

$(function () {
	//隔行换色
	$("tbody tr:odd").css("background-color", "#eee");
	var numId = $("tbody td");
	numId.click(function () {
		var tdIns = $(this);
		if (tdIns.children("input").length > 0) {
			return false;
		}
		var inputIns = $("<input type="text" />"); //需要插入的输入框代码
		var text = $(this).html();
		inputIns.width(tdIns.width()); //设置input与td宽度一致
		inputIns.val(tdIns.html()); //将本来单元格td内容copy到插入的文本框input中
		tdIns.html(""); //删除原来单元格td内容
		inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中
		inputIns.click(function () {
			return false;
		});
		//处理Enter和Esc事件
		inputIns.keyup(function (event) {
			var keycode = event.which;
			if (keycode == 13) {
				var inputText = $(this).val();
				tdIns.html(inputText);
			}
			if (keycode == 27) {
				tdIns.html(text);
			}
		});
	});
});

效果点这里

鼠标点击单元格时单元格变成可一个文本框，可用enter和esc控制操作完成与否。

嗯。效果挺不错的吧！废话一句漂亮与否还得看CSS哦！

《漂亮的JQuery可编辑表格》上有 28 条评论

南昌网站建设在 2010年10月9日02:16 说：

不错啊不过鼠标移到事件处理好点就更炫了

回复 ↓
风羽在 2010年7月13日12:48 说：

不太会JS哦，jQuery真的好强大啊。

回复 ↓
小不点在 2010年6月24日08:22 说：

我喜欢jQ的方式。

回复 ↓
集趣在 2010年6月20日08:51 说：

JQuery真的很强大哦

回复 ↓
- kily 在 2010年6月20日09:07 说：
  
  @集趣嗯。是的，JQuery的精髓就在于“write less, do more”
  
  回复 ↓
  - 阅城在 2010年6月24日09:50 说：
    
    是呀，现在JQuery挺广的说，好多导航特效真帅。
    
    回复 ↓
微酷在 2010年6月16日18:57 说：

唉，怎么还没有更新呢。

回复 ↓
- kily 在 2010年6月16日20:28 说：
  
  @微酷我懒,没有好东西宁愿不更新!
  
  回复 ↓
颓废在 2010年6月13日00:42 说：

jQuery,我还刚刚入门

回复 ↓
willerce 在 2010年6月12日18:07 说：

效果还不错。收藏了。

回复 ↓
林西老九在 2010年6月12日17:10 说：

不错不错，嘿嘿。对了，keelii毕业没？老九我是刚离校，好伤感啊，呜呜呜

回复 ↓
- kily 在 2010年6月12日17:17 说：
  
  @林西老九我毕业了不过还没离校，等毕业证呢！
  
  回复 ↓
子猴在 2010年6月12日09:25 说：

jQuery是挺不错的，挺炫

回复 ↓
huangjun 在 2010年6月7日13:54 说：

6，1写的我居然还没过来看，罪过啊~

回复 ↓
- kily 在 2010年6月7日14:01 说：
  
  @huangjun 哈哈。尽早都一样！
  
  回复 ↓
pazz7ven 在 2010年6月6日22:41 说：

效果很不错阿呵呵你的高亮代码用的什么

回复 ↓
- kily 在 2010年6月7日14:03 说：
  
  @pazz7ven 我没用插件，引用代码是自带的CSS样式控制的，红色部分是在WLR里面编辑的！
  
  回复 ↓
烟台SEO 在 2010年6月6日15:36 说：

每日一顶，老兄我来支持你了~

回复 ↓
微酷在 2010年6月4日19:09 说：

没研究过JQuery，落后好多啦。

回复 ↓
踏雪残情在 2010年6月3日23:09 说：

现在一直用jquery了.
嘿嘿,有空我也研究研究!

回复 ↓
王光卫中文博客在 2010年6月3日15:06 说：

好分享要支持

回复 ↓
瑞丽依佳人在 2010年6月2日17:11 说：

简洁大气。。漂亮

回复 ↓
米可在 2010年6月2日16:58 说：

感觉很漂亮啊嘿嘿不错呢

回复 ↓
Hobo 在 2010年6月2日14:56 说：

现在用Extjs呢呵呵，效果也不错。jQuery的东西也尝试过很多。感觉jQuery要快一些。

回复 ↓
- kily 在 2010年6月2日16:31 说：
  
  @Hobo 相对于ExtJs这种比较大型的JS库来说JQuery还是比较小巧的。不过各有所长啦！
  
  回复 ↓
A.shun 在 2010年6月1日21:24 说：

看不懂啊
要找个时间学点js才好，应用听广泛的

回复 ↓
wuleilei 在 2010年6月1日11:59 说：

哇哈哈，沙发。。
刚看了一下效果，真不错，以前还没用过呢，一定要好好研究一下。

回复 ↓
- kily 在 2010年6月1日18:35 说：
  
  @wuleilei 呵呵。这是Itcast上的讲师讲到的一个实例，感觉挺好就研究了下！
  
  回复 ↓

发表评论取消回复