记得几个月前，曾经做过会议室预定显示、预定的功能，但是当时是一个彻彻底底小白，啥都不会，别人好的效果也做不出来。近日来通过对jquery和javascript的学习，照样画葫芦的模仿了那个效果。
先贴张别人的效果图
我的思路是这样的，当鼠标点击td时，条件判断设为true同时获得该td，然后拖动时，获得鼠标最后停留的td，最后将这两者之间的td（也就是选中的td）背景色变化。
另外想说句，jquery是个好东西，很好很强大，附上总体代码
html代码
View Code 无标题文档 选择会议室日期：
哈哈 7 8 9 10 11 12 13 14 15 16 17
会议室1 会议室2 会议室3 会议室4
处理拖动时效果的js代码
View Code (function ($) { $.fn.hytd = function () { return this.each(function () { var moveable = false var items = []; //建立数组items来存储td对象 var items_positon = []; var obj_moveover = null; var i_begin = null; var i_end = null; var t = $(this); _t = this; function getitems() { t.find("td").each(function () { var pos = {}; pos.obj = this; pos.left = $(this).offset().left; pos.top = $(this).offset().top; items_positon.push(pos); }) } function _mousedown(e) { e = e || window.event; i_end = null; var mouse_left = e.pageX; for (var i = 0; i < items_positon.length; i++) { if (mouse_left > items_positon[i].left) { i_begin = i; } } moveable = true; } function _mouseup(e) { e = e || window.event; moveable = false; } function mousemoveobj(e) { e = e || window.event; if (moveable) { var mouse_left = e.pageX; for (var i = 0; i < items_positon.length; i++) { if (mouse_left > items_positon[i].left) { //obj_moveover = items_positon[i]; obj_moveover1 = items_positon[i + 1]; i_end = i; } } } if (i_end != null) { for (var i = 0; i < items_positon.length; i++) { if ((i < i_end && i > i_begin) || (i > i_end && i < i_begin) || (i == i_begin && i_begin != i_end)) { $(items_positon[i].obj).css('background', 'yellow'); } else { $(items_positon[i].obj).css('background', 'green'); } } } } var getobj_x = function (obj) { var ret = 0; while (obj != null) { ret += obj.offsetLeft; obj = obj.offsetParent; } return ret; } function init() { getitems(); t.find("td").bind('mousedown', _mousedown).bind('mousemove', mousemoveobj); $(document).bind('mouseup', _mouseup); } init(); }) }})(jQuery); jquery我用的是1.7.2
写这个一方面说明了这几天javascript和jquery不是白学，同时还能加深印象，最重要的一点是若能有大神看到，顺带指点我这个超级小白一二，那岂不美哉！小白先撤做后台代码去。