2007/11/02 目前只是简单的实现了行选择的效果。 后面的功能也是利用DIV来实现的并结合Ajax方法将登陆的数据保存到数据库中。 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < title > Calender Event Page </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=shift_jis" > < script language ="javascript" > ... var divCount = 0;var drawFlag = false;var initPointY = 20;function drawTdPanel()...{ var pointX, pointY; var iHeight; pointY = event.y; if (pointY < 20) return ; if ((pointY / 20) > 0)...{ iHeight = pointY -initPointY; iHeight = (Math.floor(iHeight / 20)*20); divCount = divCount + 1; var objDiv = document.createElement("Div"); objDiv.id = "EventPanel" + divCount; objDiv.style.position = "absolute"; objDiv.style.top = initPointY + "px"; objDiv.style.background = "#9999CC"; objDiv.style.zindex = "3"; objDiv.style.width = "85%"; objDiv.style.height = iHeight + "px"; var objDivPanel = document.getElementById("divPanel"); objDivPanel.appendChild(objDiv); }}function DrawDivOnMouseDown()...{ if (event.y < 20) return ; drawFlag = true; initPointY = event.y ; initPointY = (Math.floor((initPointY) / 20) - 1) * 20; drawTdPanel();}function DrawDivOnMouseMove()...{ window.status = "X:" + event.x + ",Y:" + event.y; if (drawFlag == true)...{ var objDivPanel = document.getElementById("divPanel"); objDivPanel.innerHTML = ""; drawTdPanel(); }}function DrawDivOnMouseUp()...{ drawFlag = false;}function drawEventPanel()...{} </ script > </ head > < body > < div id ="divPanel" onMouseDown ="DrawDivOnMouseDown();" onMouseMove ="DrawDivOnMouseMove();" onMouseUp ="DrawDivOnMouseUp();" style ="position:absolute; filter:alpha(opacity=80); border:1px solid #FF0000; background-color:#FFFFCC; z-index:2; width:85%; height:300px; left:111px; top: 16px;" > </ div > < div style ="top:20px;border:1px solid #FF0033; " > < table id ="CalenderEventTable" width ="100%" border ="1" cellpadding ="0" cellspacing ="0" > < tr > < td width ="10%" rowspan ="2" align ="center" valign ="top" > 00:00 </ td > < td width ="90%" > </ td > </ tr > < tr > < td > </ td > </ tr > < tr > < td rowspan ="2" align ="center" valign ="top" > 01:00 </ td > < td > </ td > </ tr > < tr > < td > </ td > </ tr > < tr > < td rowspan ="2" align ="center" valign ="top" > 02:00 </ td > < td > </ td > </ tr > < tr > < td > </ td > </ tr > < tr > < td rowspan ="2" align ="center" valign ="top" > 03:00 </ td > < td > </ td > </ tr > < tr > < td > </ td > </ tr > < tr > < td rowspan ="2" align ="center" valign ="top" > 04:00 </ td > < td > </ td > </ tr > < tr > < td > </ td > </ tr > </ table > </ div > </ body > </ html >