如何实现像MS Project项目管理软件中作计划时的时间轴的拖拉功能？

<script>
begin=false;
function mybegin()
{
for(i=0;i<document.all.mytable.rows[0].cells.length;i++)
document.all.mytable.rows[0].cells[i].style.background="yellow";
event.srcElement.style.background="blue";
begin=true;
}
function myend()
{
event.srcElement.style.background="blue";
begin=false;
}
function mysel()
{
if(begin)
event.srcElement.style.background="blue";
}
</script>
<table id=mytable style="background:yellow">
<tr onmousedown=mybegin() onmousemove=mysel() onmouseup=myend()><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
</table>

解决方案 »

  1.   

    这个可能够用了吧：
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Demo</title>
    </head><body>
    <script language="JavaScript">
    var SelectStart;
    var SelectEnd;
    function MouseMove()
    {
    var obj = window.event.srcElement;
    if(window.event.button != 1) return false;
    if(obj.tagName != "TD") return false;

    obj.bgColor = "#0000FF";
    }function Start()
    {
    SelectStart = -1;
    SelectEnd = -1;
    var obj = window.event.srcElement.parentElement;
    if(window.event.button != 1) return false;
    if(obj.tagName != "TR") return false;
    for(var i = 0; i < obj.children.length; i++)
    {
    obj.children[i].bgColor = "#FFFFFF";
    if(obj.children[i] == window.event.srcElement) SelectStart = i;
    }
    }function End()
    {
    var obj = window.event.srcElement;
    if(window.event.button != 1) return false;
    if(obj.tagName != "TD") return false;
    for(var i = 0; i < obj.parentElement.children.length; i++)
    {
    if(obj.parentElement.children[i] == window.event.srcElement) SelectEnd = i;
    }

    if(SelectStart > SelectEnd)
    {
    var tmp = SelectStart;
    SelectStart = SelectEnd;
    SelectEnd = tmp;
    }

    for(var i = SelectStart; i < SelectEnd; i++)
    {
    obj.parentElement.children[i].bgColor = "#0000FF";
    }

    if(SelectStart < 0)
    StartNum.innerText = "没有选择";
    else
    StartNum.innerText = obj.parentElement.children[SelectStart].title;

    if(SelectEnd < 0)
    EndNum.innerText = "没有选择";
    else
    EndNum.innerText = obj.parentElement.children[SelectEnd].title;

    }
    </script>
    <table border="0" width="300" cellspacing="0" cellpadding="0" style="border:1 solid #6699FF;cursor:default;">
      <tr height="22" onmousemove="MouseMove();" onmousedown="Start();" onmouseup="End();">
        <td width="4%" title="1"></td>
        <td width="4%" title="2"></td>
        <td width="4%" title="3"></td>
        <td width="4%" title="4"></td>
        <td width="4%" title="5"></td>
        <td width="4%" title="6"></td>
        <td width="4%" title="7"></td>
        <td width="4%" title="8"></td>
        <td width="4%" title="9"></td>
        <td width="4%" title="10"></td>
        <td width="4%" title="11"></td>
        <td width="4%" title="12"></td>
        <td width="4%" title="13"></td>
        <td width="4%" title="14"></td>
        <td width="4%" title="15"></td>
        <td width="4%" title="16"></td>
        <td width="4%" title="17"></td>
        <td width="4%" title="18"></td>
        <td width="4%" title="19"></td>
        <td width="4%" title="20"></td>
        <td width="5%" title="21"></td>
        <td width="5%" title="22"></td>
        <td width="5%" title="23"></td>
        <td width="5%" title="24"></td>
      </tr>
    </table><br>
    选定范围：<span id="StartNum">没有选择</span> - <span id="EndNum">没有选择</span>
    </body></html>