鼠标控制表格问题二(求javascript)

鼠标拖拽得定义三个函数
onmousedown()
{
获得要拖拽的行的id
}
;
onmousemove()
{
记下移动到的鼠标的位置
}
;
onmouseup()
{
1.把鼠标位置付给现在Div的位置
2.执行函数
}
;
自己慢慢写被，这个需求不太难吧

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

先吧这个毛坯发出来供大家参考,还有好多工作要做,比如表格选中区域的计算,现在的太简单了,css方面也需要再改善一下时间紧今天就写这么多<!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>
<style type="text/css">
.Td_select{
display:block;
border:1px #0000FF solid;
}
</style>
<script language="javascript">
//扩展数组对象
Array.prototype.isIn=function(obj){
for(var i=0;i<this.length;i++){
if(this[i]===obj){
return true;
break;
}
}
return false;
}

//保存选中对象
var arrSelTd=new Array();

document.onmousedown=function(){//绑定文档的鼠标事件
var evt=window.event||arguments[0];
var srcEl=evt.srcElement||evt.target;
if(srcEl.tagName=='TD'){
var oTds=document.getElementsByTagName('td');
//绑定表格的鼠标事件
for(var i=0;i<oTds.length;i++){
oTds[i].onmouseover=Td_mouseover;
oTds[i].onmousedown=Td_mouseover;
}
}
}

document.onmouseup=function(){//绑定文档的鼠标事件
var oTds=document.getElementsByTagName('td');
if(oTds[0].onmouseover){
for(var i=0;i<oTds.length;i++){
oTds[i].onmouseover=null;
oTds[i].onmouseover=null;
}
}

if(arrSelTd.length>0){
//释放表格的鼠标事件
//将输入填充选中表格并恢复选中表格外观
var strInput=prompt("请输入您要填充的字符","");
for(var i=0;i<arrSelTd.length;i++){
arrSelTd[i].innerHTML=strInput;
arrSelTd[i].className="";
}
//清空数组
arrSelTd.length=0;
}
}

function Td_mouseover(){
var evt=window.event||arguments[0];
var srcEl=evt.srcElement||evt.target;
srcEl.className="Td_select";
if(!arrSelTd.isIn(srcEl))
arrSelTd.push(srcEl);
}
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>1</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>2</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>3</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>4</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>5</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>6</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>7</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>8</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>9</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>10</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>