问一个表格内容拖移的问题,急!
我在一张页面上做了2个table,然后我2张的表头走是做死的比如,姓名,年龄什么的.
然后下面的内容是一张表从数据库循环读,在显示出来的,另一张是就只有表头的,没有内容.
完了以后我想通过鼠标按中下面读出的内容,然后拖动到另一张表格里去.意思是按中一条数据拖到那张只有表头的表格里而且要位置和表头对的起来呵呵.
大概我想实现的就是这个意思,要数据了拖一条过去在要了在拖一条过去,一定要用JS做这个功能,小弟很急,老大说一定要做出来,我没什么头绪,希望高手帮我下,在次感谢大虾们.
------解决方案--------------------用js比较好实现
在行头用一个checkbox,选中就用js把这行的数据加到另一个表格中,即checkbox单击触发事件
每一行用一个id号唯一的form,每个值所在的控件都用id标明,方便js调用,对应添加
------解决方案-------------------- <script language= "javascript ">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}
function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex > = obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
alert(tempRowIndex+obj.rowIndex);
}
</script>
用鼠标移动TR <br>
<TABLE WIDTH= "300 " BORDER= "1 " >
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=blue> 0 </TD> <TD> 0 </TD> <TD> 0 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=black> 1 </TD> <TD> 1 </TD> <TD> 1 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=red> 2 </TD> <TD> 2 </TD> <TD> 2 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 3 </TD> <TD> 3 </TD> <TD> 3 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 4 </TD> <TD> 4 </TD> <TD> 4 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 5 </TD> <TD> 5 </TD> <TD> 5 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 6 &