js,java拖动表格复制颜色

 

 

 

---

---

   效果如图:

 

< HTML >
< HEAD >
< TITLE > ChooseColor </ TITLE >
</ HEAD >
< BODY  onload ="setTdcolor();" >
< script  type ="text/javascript"   > ...
function setTdcolor() ...{
var colorlist = new Array(12);
colorlist[0]="#CCFFFF"; colorlist[1]="#3366FF"; colorlist[2]="#800080"; colorlist[3]="#FF00FF"; colorlist[4]="#FFCC00";
colorlist[5]="#99CC00"; colorlist[6]="#FFFF99"; colorlist[7]="#00CCFF"; colorlist[8]="#FF00FF"; colorlist[9]="#99CCFF";
colorlist[10]="#00FF00"; colorlist[11]="#00CCFF";
t20.style.backgroundColor = colorlist[0];
t26.style.backgroundColor = colorlist[6];
t31.style.backgroundColor = colorlist[1];
t37.style.backgroundColor = colorlist[7];
t42.style.backgroundColor = colorlist[2];
t48.style.backgroundColor = colorlist[8];
t53.style.backgroundColor = colorlist[3];
t59.style.backgroundColor = colorlist[9];
t64.style.backgroundColor = colorlist[4];
t610.style.backgroundColor = colorlist[10];
t75.style.backgroundColor = colorlist[5];
t711.style.backgroundColor = colorlist[11];
}

var staticColor = null;
var startTD = null;
var endTD = null;
var startObj = null;
var tdColorlist = new Array(20);
function MouseDown(trId) ...{ 
    var e = event.srcElement;
    for (var i = 0; i < tab.rows(0).cells.length; i++)...{
      var obj = eval(trId + i); 
      tdColorlist[i] = obj.style.backgroundColor;   
      if (obj == e) ...{
          staticColor = obj.style.backgroundColor;
          startTD = i;
          startObj = obj;
      }
    }
    startObj.setCapture();
    e.onmouseup = MouseUp;
} 
function MouseMove(trId) ...{ 
    var e = event.srcElement;    
    e.onmouseup = MouseUp; 
    if(startObj != null ) ...{
        for (var i = 0; i < tab.rows(0).cells.length; i++)...{
          var obj = eval(trId + i);   
          if (obj == e) ...{
              endTD = i;
          }
        }
        for (var i = 0; i < tab.rows(0).cells.length; i++)...{     
          var obj = eval(trId + i); 
          if((i > startTD && i < endTD) || (i < startTD && i > endTD) || i == startTD || i == endTD) ...{
              obj.style.backgroundColor = staticColor;
          } else ...{
              obj.style.backgroundColor = tdColorlist[i];
          }
        }
    }    
} 

function MouseUp() ...{
    if(startObj != null ) ...{
        startObj.releaseCapture(); 
    }
     staticColor = null;
     startTD = null;
     startObj = null;
} 

</ script >
< table  border ="2"  id ="tab" >
< tr  height ="50" onmousemove ="MouseMove('t2')" >
< td   id ="t20"  onmousedown ="MouseDown('t2')"    >  move  </ td >
< td   id ="t21"  onmousedown ="MouseDown('t2')"    > move </ td >
< td   id ="t22"  onmousedown ="MouseDown('t2')"    > move </ td >
< td   id ="t23"  onmousedown ="MouseDown('t2')"    > move </ td >
< td   id ="t24"  onmousedown ="MouseDown('t2')"   > move </ td >
< td   id ="t25"  onmousedown ="MouseDown('t2')"   > move </ td >
< td   id ="t26"  onmousedown ="MouseDown('t2')"    > move </ td >
< td   id ="t27"  onmousedown ="MouseDown('t2')"    > move </ td >
< td   id ="t28"  onmousedown ="MouseDown('t2')"    > move </ td >
< td   id ="t29"  onmousedown ="MouseDown('t2')"    > move </ td >
< td   id ="t210"  onmousedown ="MouseDown('t2')"   > move </ td >
< td   id ="t211"  onmousedown ="MouseDown('t2')"   > move </ td >
< td   id ="t212"  onmousedown ="MouseDown('t2')"    > move </ td >
</ tr >
< tr  height ="50"  onmousemove ="MouseMove('t3')" >
< td   id ="t30"  onmousedown ="MouseDown('t3')"   >  move </ td >
< td   id ="t31"  onmousedown ="MouseDown('t3')"    > move </ td >
< td   id ="t32"  onmousedown ="MouseDown('t3')"    > move </ td >
< td   id ="t33"  onmousedown ="MouseDown('t3')" > move </ td >
< td   id ="t34"  onmousedown ="MouseDown('t3')"   > move </ td >
< td   id ="t35"  onmousedown ="MouseDown('t3')"    > move </ td >
< td   id ="t36"  onmousedown ="MouseDown('t3')"   > move </ td >
< td   id ="t37"  onmousedown ="MouseDown('t3')"    > move </ td >
< td   id ="t38"  onmousedown ="MouseDown('t3')"    > move </ td >
< td   id ="t39"  onmousedown ="MouseDown('t3')" > move </ td >
< td   id ="t310"  onmousedown ="MouseDown('t3')"   > move </ td >
< td   id ="t311"  onmousedown ="MouseDown('t3')"    > move </ td >
< td   id ="t312"  onmousedown ="MouseDown('t3')"   > move </ td >
</ tr >
< tr  height ="50"  onmousemove ="MouseMove('t4')" >
< td   id ="t40"  onmousedown ="MouseDown('t4')"   >  move  </ td >
< td   id ="t41"  onmousedown ="MouseDown('t4')"    > move </ td >
< td   id ="t42"  onmousedown ="MouseDown('t4')"    > move </ td >
< td   id ="t43"  onmousedown ="MouseDown('t4')" > move </ td >
< td   id ="t44"  onmousedown ="MouseDown('t4')"   > move </ td >
< td   id ="t45"  onmousedown ="MouseDown('t4')"    > move </ td >
< td   id ="t46"  onmousedown ="MouseDown('t4')"   > move </ td >
< td   id ="t47"  onmousedown ="MouseDown('t4')"    > move </ td >
< td   id ="t48"  onmousedown ="MouseDown('t4')"    > move </ td >
< td   id ="t49"  onmousedown ="MouseDown('t4')" > move </ td >
< td   id ="t410"  onmousedown ="MouseDown('t4')"   > move </ td >
< td   id ="t411"  onmousedown ="MouseDown('t4')"    > move </ td >
< td   id ="t412"  onmousedown ="MouseDown('t4')"   > move </ td >
</ tr >
< tr  height ="50"  onmousemove ="MouseMove('t5')" >
< td   id ="t50"  onmousedown ="MouseDown('t5')"   >  move  </ td >
< td   id ="t51"  onmousedown ="MouseDown('t5')"    > move </ td >
< td   id ="t52"  onmousedown ="MouseDown('t5')"    > move </ td >
< td   id ="t53"  onmousedown ="MouseDown('t5')" > move </ td >
< td   id ="t54"  onmousedown ="MouseDown('t5')"   > move </ td >
< td   id ="t55"  onmousedown ="MouseDown('t5')"    > move </ td >
< td   id ="t56"  onmousedown ="MouseDown('t5')"   > move </ td >
< td   id ="t57"  onmousedown ="MouseDown('t5')"    > move </ td >
< td   id ="t58"  onmousedown ="MouseDown('t5')"    > move </ td >
< td   id ="t59"  onmousedown ="MouseDown('t5')" > move </ td >
< td   id ="t510"  onmousedown ="MouseDown('t5')"   > move </ td >
< td   id ="t511"  onmousedown ="MouseDown('t5')"    > move </ td >
< td   id ="t512"  onmousedown ="MouseDown('t5')"   > move </ td >
</ tr >
< tr  height ="50"  onmousemove ="MouseMove('t6')" >
< td   id ="t60"  onmousedown ="MouseDown('t6')"   >  move  </ td >
< td   id ="t61"  onmousedown ="MouseDown('t6')"    > move </ td >
< td   id ="t62"  onmousedown ="MouseDown('t6')"    > move </ td >
< td   id ="t63"  onmousedown ="MouseDown('t6')" > move </ td >
< td   id ="t64"  onmousedown ="MouseDown('t6')"   > move </ td >
< td   id ="t65"  onmousedown ="MouseDown('t6')"    > move </ td >
< td   id ="t66"  onmousedown ="MouseDown('t6')"   > move </ td >
< td   id ="t67"  onmousedown ="MouseDown('t6')"    > move </ td >
< td   id ="t68"  onmousedown ="MouseDown('t6')" > move </ td >
< td   id ="t69"  onmousedown ="MouseDown('t6')"   > move </ td >
< td   id ="t610"  onmousedown ="MouseDown('t6')"    > move </ td >
< td   id ="t611"  onmousedown ="MouseDown('t6')"   > move </ td >
< td   id ="t612"  onmousedown ="MouseDown('t6')"    > move </ td >
</ tr >
< tr  height ="50"  onmousemove ="MouseMove('t7')" >
< td   id ="t70"  onmousedown ="MouseDown('t7')"   >   move  </ td >
< td   id ="t71"  onmousedown ="MouseDown('t7')"    > move </ td >
< td   id ="t72"  onmousedown ="MouseDown('t7')"    > move </ td >
< td   id ="t73"  onmousedown ="MouseDown('t7')" > move </ td >
< td   id ="t74"  onmousedown ="MouseDown('t7')"   > move </ td >
< td   id ="t75"  onmousedown ="MouseDown('t7')"    > move </ td >
< td   id ="t76"  onmousedown ="MouseDown('t7')"   > move </ td >
< td   id ="t77"  onmousedown ="MouseDown('t7')"    > move </ td >
< td   id ="t78"  onmousedown ="MouseDown('t7')"    > move </ td >
< td   id ="t79"  onmousedown ="MouseDown('t7')" > move </ td >
< td   id ="t710"  onmousedown ="MouseDown('t7')"   > move </ td >
< td   id ="t711"  onmousedown ="MouseDown('t7')"    > move </ td >
< td   id ="t712"  onmousedown ="MouseDown('t7')"   > move </ td >
</ tr >
</ table >
</ BODY >
</ HTML >