我在一张页面上做了2个table,然后我2张的表头走是做死的比如,姓名,年龄什么的.然后下面的内容是一张表从数据库循环读,在显示出来的,另一张是就只有表头的,没有内容.
完了以后我想通过鼠标按中下面读出的内容,然后拖动到另一张表格里去.意思是按中一条数据拖到那张只有表头的表格里而且要位置和表头对的起来呵呵.
大概我想实现的就是这个意思,要数据了拖一条过去在要了在拖一条过去,一定要用JS做这个功能,小弟很急,老大说一定要做出来,我没什么头绪,希望高手帮我下,在次感谢大虾们.
完了以后我想通过鼠标按中下面读出的内容,然后拖动到另一张表格里去.意思是按中一条数据拖到那张只有表头的表格里而且要位置和表头对的起来呵呵.
大概我想实现的就是这个意思,要数据了拖一条过去在要了在拖一条过去,一定要用JS做这个功能,小弟很急,老大说一定要做出来,我没什么头绪,希望高手帮我下,在次感谢大虾们.
在行头用一个checkbox,选中就用js把这行的数据加到另一个表格中,即checkbox单击触发事件
每一行用一个id号唯一的form,每个值所在的控件都用id标明,方便js调用,对应添加
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</TD><TD>6</TD><TD>6</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR> </script>
</TABLE>你把代码改一下应该能实现你所需要的功能！~希望能够帮到你
<HTML>
<HEAD>
<title>WebForm2</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<SCRIPT language="javascript">
/*--------全局变量-----------*/
var x0,y0,x1,y1,isreplace;
var movable = false;
var preCell = null;
var normalColor = null;
var preColor = "lavender";
var endColor = "#FFCCFF";
/*--------全局变量-----------*/
//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t; //纵坐标
pos[1] = l; //横坐标
return pos;
}
//当鼠标拖动某一个td时,显示临时图层
function showDiv(ischange)
{
var ischange=ischange
isreplace=ischange //得到触发该事件的是哪个table来决定是否替换
var obj = event.srcElement; //得到触发该事件的对象,也就是对触发该事件对象的一个引用
var pos = new Array(); //定义一个数组用来存放位置参数
//获取过度图层
var oDiv = document.all.tempDiv; //对临时层的一个引用
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand"; //当按下鼠标时,鼠标模式改成手型
pos = getPos(obj); //得到该td的位置(包括横纵坐标)
//计算中间过度层位置，赋值
oDiv.style.width = obj.offsetWidth; //得到td的宽,赋值给临时层tempDiv
oDiv.style.height = obj.offsetHeight; //得到td的高,赋值给临时层tempDiv
oDiv.style.top = pos[0]; //得到该td的纵坐标的位置,赋值给临时层tempDiv
oDiv.style.left = pos[1]; //得到该td的横坐标的位置,赋值给临时层tempDiv
oDiv.innerHTML = obj.innerHTML; //得到该td的文本显示内容,赋值给临时层tempDiv
oDiv.style.display = ""; //显示临时层,也就是当鼠标选中某一个td,按下去时显示的那个紫红色的框框
x0 = pos[1];
y0 = pos[0];
x1 = event.clientX; //返回当前鼠标所在位置的横坐标
y1 = event.clientY; //返回当前鼠标所在位置的纵坐标
//记住原td
normalColor = obj.style.backgroundColor; //得到触发该事件对象的背景色
obj.style.backgroundColor = preColor; //改变触发该事件的对象的背景色
preCell = obj; //赋值给另外一个空对象(属公共的变量)
movable = true; //标识有td在移动
}
}
function dragDiv()
{
if(movable) //当上面的showDiv事件为真时,执行下面的代码
{
var oDiv = document.all.tempDiv; //对临时层的一个引用
var pos = new Array(); //定义一个存放位置的数组
oDiv.style.top = event.clientY - y1 + y0; //定义临时层的位置(纵坐标)为:当前鼠标位置(纵坐标)-按下鼠标时的鼠标位置(纵坐标)+原来td的纵坐标
oDiv.style.left = event.clientX - x1 + x0; //定义临时层的位置(横坐标)为:当前鼠标位置(横坐标)-按下鼠标时的鼠标位置(横坐标)+原来td的横坐标
var oTable = document.all.tb2;
//根据条件显示不同背景色
for(var i=0; i<oTable.cells.length; i++)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
pos = getPos(oTable.cells[i]);
if(event.x>pos[1] && event.x<pos[1]+oTable.cells[i].offsetWidth && event.y>pos[0] && event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i] != preCell)
oTable.cells[i].style.backgroundColor = endColor;
}
else
{
if(oTable.cells[i] != preCell)
oTable.cells[i].style.backgroundColor = normalColor;
}
}
}
}
}
function hideDiv()
{
if(movable)
{
var oTable = document.all.tb2;
var pos = new Array();
if(preCell != null)
{
for(var i=0; i<oTable.cells.length; i++)
{
pos = getPos(oTable.cells[i]);
//计算鼠标位置，是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i].tagName.toLowerCase() == "td" && oTable.cells[i].style.backgroundColor.toLowerCase()=="#ffccff")
{
if(isreplace=="2"){ //如果是下面表格内部拖动,则内容互换
preCell.innerHTML = oTable.cells[i].innerHTML;
}
//当下面的td中有内容时,则上面的课程将与下面的课程互换----注意:这个if和下面紧接着的if位置不能互换.
if(isreplace=="1" && oTable.cells[i].innerText.length > 1){
preCell.innerHTML= oTable.cells[i].innerHTML
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}
//当下面的td中没有内容时,则上面的课程将被移除----注意:这个if和上面紧接着的if位置不能互换.
if(isreplace=="1" && oTable.cells[i].innerText.length == 1){
preCell.innerHTML=""
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}
if(isreplace=="2"){
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}
//清除原单元格和目标单元格的样式
preCell.style.backgroundColor = normalColor;
oTable.cells[i].style.backgroundColor = normalColor;
oTable.cells[i].style.cursor = "";
preCell.style.cursor = "";
preCell.style.backgroundColor = normalColor;
}
}
}
}
movable = false;
//清除提示图层
document.all.tempDiv.style.display = "none";
}
}
//在页面提交时触发下面的事件,给隐藏字段赋值
function getvalue(){
for(var i=0; i<oTable.cells.length; i++){
document.all["kc_name"+i].value = oTable.cells[i].innerHTML;
//alert(document.all["kc_name"+i].value)
}
}
document.onmouseup = function()
{
hideDiv();
var oTable = document.all.tb2;
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = normalColor;
}
document.onmousemove = function()
{
dragDiv();
}
</SCRIPT>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form name="Form1" method="post" action="WebForm11.aspx" id="Form1">
<table id="tb1" cellspacing="0" onMouseDown="showDiv('1')" onselectstart="return false;" border="0" style="width:200px;border-collapse:collapse;BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; FONT-SIZE:13px; BORDER-LEFT:black 1px solid; BORDER-BOTTOM:black 1px solid">
<tr>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
</tr>
<tr>
<td>英语</td>
</tr>
<tr>
<td>物理</td>
</tr>
<tr>
<td>化学</td>
</tr>
<tr>
<td>地理</td>
</tr>
<tr>
<td>生物</td>
</tr>
<tr>
<td>历史</td>
</tr>
<tr>
<td>政治</td>
</tr>
</table>
请选择列
<TABLE style="BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; FONT-SIZE:13px; BORDER-LEFT:black 1px solid; BORDER-BOTTOM:black 1px solid"
id="tb2" onMouseDown="showDiv('2')" onselectstart="return false;" cellpadding="0" cellspacing="1"
bordercolor="#ffccff" bgcolor="#999999" width="200">
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
<tr align="center" width="50">
<td height="22" bgcolor="#FFFFFF">
</td>
</tr>
</TABLE>
<DIV id="tempDiv" onselectstart="return false" style="cursor:hand;position:absolute; border:1px solid black; background-color:#FFCCFF; display:none">
</DIV>
</form>
</body>
</HTML>
这个也是一种方法