记得几个月前，曾经做过会议室预定显示、预定的功能，但是当时是一个彻彻底底小白，啥都不会，别人好的效果也做不出来。近日来通过对jquery和javascript的学习，照样画葫芦的模仿了那个效果。
先贴张别人的效果图
我的思路是这样的，当鼠标点击td时，条件判断设为true同时获得该td，然后拖动时，获得鼠标最后停留的td，最后将这两者之间的td（也就是选中的td）背景色变化。
另外想说句，jquery是个好东西，很好很强大，附上总体代码
html代码
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script src="hyxz.js" type="text/javascript"></script> <style type="text/css"> *{ margin:0; padding:0} #hy_content,#hy_head{ overflow:hidden; width:1000px;} #hy_head td{ width:80px; text-align:center; border:1px black solid;} th{ width:100px; border:1px black solid} #hy_content td{width:19px; background:green; height:30px; padding:0; margin:0} #hy_content td:hover{width:19px; background:red; height:30px;} </style> <script type="text/javascript"> $(function () { $("#hy_content tr").hytd(); }) </script> </head> <body> <div> <div id="head"> <div id="xzhys_all" style=" position:relative; left:150px;top:0px;"> <span>选择会议室</span> <select id="xzhys"> <option selected="selected">选择会议室</option> </select> <div style=" position:absolute; left:300px; top:0px"> <span>日期：</span> <select id="rq"> <option selected="selected">2013/4/16</option> </select> </div> </div> </div> <div id="content"> <table id="hy_head"> <tr> <th>哈哈</th> <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td> </tr> </table> <table id="hy_content"> <tr id="hy1"> <th>会议室1</th> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> </tr> <tr id="hy2"> <th>会议室2</th> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> </tr> <tr id="Tr1"> <th>会议室3</th> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> </tr> <tr id="Tr2"> <th>会议室4</th> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td> </tr> </table> </div> </div> </body> </html>
处理拖动时效果的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不是白学，同时还能加深印象，最重要的一点是若能有大神看到，顺带指点我这个超级小白一二，那岂不美哉！小白先撤做后台代码去。