<html>
<head>
<meta http-equiv="Content-Type" content="application/msword; charset=GBK" />
<title>跨行移动</title>
<link rel="stylesheet" href=/pif/css/default.css type="text/css">
<head></head>
<script>
function test(obj)
{
alert(obj.offsetWidth);
return;
//var lft=obj.offsetTop;
var valueT = 0, valueL = 0;
do {
valueT += (obj.offsetTop || 0)-obj.scrollTop;
valueL += (obj.offsetLeft || 0)-obj.scrollLeft;
obj = obj.offsetParent;
} while (obj);
alert(valueT);
}
//隐藏时，TD背景颜色
var colorY="yellow";
//隐藏产品属性设置方法
function hideAttribute(obj)
{
var colorN="";
//√X
if(obj.value=="X")
{//表示需要隐藏
obj.value="√";
obj.style.background=colorY;
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
obj.style.background=colorY;
//设置点击单元格移到表格最后
//----1---得到表格最后一行
var tableObj=obj.parentNode.parentNode;
var endTR=tableObj.childNodes[tableObj.childNodes.length-1];
endTR.appendChild(obj);
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
}else{
//表示需要还原
obj.value="X";
var color="";
obj.style.background=colorN;
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
obj.style.background=colorN;
//得到第一个被隐藏的TD对象
var objPNTable=obj.parentNode.parentNode;
for(pntb=0;pntb<objPNTable.childNodes.length;pntb++){
var objPN=objPNTable.childNodes[pntb];//TR
var stopFlag=false;
for(pn=0;pn<objPN.childNodes.length;pn++){//TD
if(objPN.childNodes[pn].style.background==colorY){
objPN.insertBefore(obj,objPN.childNodes[pn]);
stopFlag=true;
break;
}
}
if(stopFlag==true){
break;
}
}
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
}
alert("bbb");
return false;
}
</script>
<body bgcolor="#EBEEF7">
<div style="height:800px;border:1px solid red;cursor:move;" width="100%" onclick="test(this)">
1233
</div>
<div style="">
<table border="1" width="88xpx" height="60px" cellspacing="0" cellpadding="0" name="PPC" id="PPC" class="table_">
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onclick="test(this)">
11111<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
22222<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
33333<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
11111bbbb<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
22222bbbb<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
33333bbbb
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
XXXXXXXXXXXXXXXXX●★■▲※
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">XXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
!!!!!!!!!!!!!!!!
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
@@@@@@@@@@@@@@@
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
###############
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
YYYYYYYYYYYYYYY
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">YYYYYYYYYYYYYYYYYYYYYY</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
$$$$$$$$$$$$
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
%%%%%%%%%%%%
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
^^^^^^^^^^^^^^^^^^
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
XXXXXXXXXXXXXXXXX
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">XXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
!!!!!!!!!!!!!!!!
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
@@@@@@@@@@@@@@@
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
###############
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
YYYYYYYYYYYYYYY
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">YYYYYYYYYYYYYYYYYYYYYY</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
$$$$$$$$$$$$
</div>
</td>
<td width="220px" class="td_3" align="center">
</td>
<td width="220px" class="td_3" align="center">
</td>
</tr>
</table>
</div>
<input type="text" id="xxx" value="aaa" style="width:0px"/>
<div id='pop-editor' style='width: 220px;height:30px;border:1px solid red;cursor:move;background:#EBEEF7;position: absolute;display:none;z-index:3001;'
onmousedown='down(event,this)' onmouseup='up(this)'>
44444aaa
</div>
<script>
var posX;
var posY;
var popDiv;
var dragable;
var objClick;
function getX(elem){
var xx=0;
while(elem){
//x=x+elem.offsetLeft;
xx=xx+elem.scrollLeft;
elem=elem.offsetParent;
}
return xx;
}
function getY(elem){
var yy=0;
while(elem){
//y=y+elem.offsetTop;
yy=yy+elem.scrollTop
elem=elem.offsetParent;
}
return yy;
}
var valueT = 0, valueL = 0;
function down(e,obj){
var objXX=obj;
var objYY=obj;
valueT=getY(objYY);
valueL=getX(objXX);
//alert(obj.id);
//alert(obj.innerHTML);
//popDiv=obj;
if(obj==null)return;
//保存点击的TD对象
var i=0;
while(i<10){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
//如果点击的是隐藏的，直接返回
if(obj.style.background!=colorY){
if(document.getElementById("pop-editor").style.display=="block")
{
up(obj);
return;
}
popDiv = document.getElementById("pop-editor");
popDiv.innerHTML=obj.innerHTML+'<iframe src="" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%;z-index:-1; filter='+'"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"'+';"> </iframe> ';
objClick=obj;
popDiv.style.left=e.clientX +valueL;
popDiv.style.top=e.clientY +valueT;
document.getElementById("pop-editor").style.display="block";
e = e || window.event; //如果是IE
posX = e.clientX - parseInt(popDiv.style.left);
posY = e.clientY - parseInt(popDiv.style.top);
//alert("posX="+posX+" posY="+posY);
dragable = true;
//alert("posX="+posX+" posY="+posY);
document.onmousemove = move;
// el = window.event.srcElement;
//el=e.srcElement;
//el.setCapture();
}
}
function move(ev){
if(dragable == true && objClick!=null){
ev = ev || window.event;//如果是IE
//取消事件冒泡
//window.event.cancelBubble = false;
popDiv.style.left = (ev.clientX - posX)+ "px";
popDiv.style.top = (ev.clientY - posY) + "px";
//popDiv.style.left = (ev.clientX - posX) + "px";
//popDiv.style.top = (ev.clientY - posY) + "px";
}
}
function up(obj){
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
//如果点击的是隐藏的，直接返回
if(obj.style.background!=colorY){
if(obj==null || obj.tagName!="TD"){
alert("放开鼠标的位置不是TD内。"+(obj==null?"null":obj.tagName));
return;
}
if(objClick==null){
alert("没有选中需要移动的内容。");
return;
}
//name="textareaTD" 判断移动的是否是大输入框，规则：大输入框只能和大输入框相互移动
//-----1----判断点击对象是不是大输入框
var objClickTTAFlag=true;
if(objClick.name!=null && objClick.name!="" && objClick.name=="textareaTD"){
//-----2----判断放开对象是不是大输入框
if(obj.name==null || obj.name=="" || obj.name!="textareaTD"){
//alert("大输入框只能和大输入框相互移动。");
//return;
}
objClickTTAFlag=false;
}
//-----2----判断放开对象是不是大输入框
if(obj.name!=null && obj.name!="" && obj.name=="textareaTD" && objClickTTAFlag==true){
//alert("非大输入框不能和大输入框相互移动。");
//return;
}
dragable = false;
document.getElementById("pop-editor").style.display="none";
//alert("up:"+obj.id);
//alert("up:"+obj.innerHTML);
//objInnerHTML=obj.innerHTML;//鼠标松开时，赋值接收单元格内容
//移动单元格
moveTD(obj);
//objClick.innerHTML=obj.innerHTML;
//obj.innerHTML=document.getElementById("pop-editor").innerHTML;
objClick=null;
//el = window.event.srcElement;
//el.setCapture();
//document.getElementById("xxx").focus();
}
}
//把鼠标放开时该单元格之后的每个单元格往后移动一个位置
function moveTD(obj)
{
//获取放开选择单元格的行对象
var trObj;
var upTD=obj;
var numberWhile=0;//控制只允许循环不超过10次，避免死循环
while(numberWhile<10){
if(upTD.parentNode!=null && upTD.parentNode.tagName=="TR"){
trObj=upTD.parentNode;
break;
}else{
upTD=upTD.parentNode;
}
numberWhile++;
}
//获取点击选择单元格的行对象
var trObjOld;
var upTDOld=objClick;
var numberWhileOld=0;//控制只允许循环不超过10次，避免死循环
while(numberWhileOld<10){
if(upTDOld.parentNode!=null && upTDOld.parentNode.tagName=="TR"){
trObjOld=upTDOld.parentNode;
break;
}else{
upTDOld=upTDOld.parentNode;
}
numberWhileOld++;
}
//判断点击和放开两者TD是否在同一个TABLE里面
if(trObj.parentNode!=trObjOld.parentNode){
//表示不再同一个表格中
alert("移动错误。");
return;
}
//-******************开始判断怎么移动***************************************
//判断是否是同一行之间的移动
var trObjTDNumber=0,trObjOldNumber=0;
if(trObj.rowIndex==trObjOld.rowIndex){//表示是同一行之间的移动
for(t=0;t<trObjOld.childNodes.length;t++){
if(trObjOld.childNodes[t]==obj){
//表示该对象是鼠标放开时的TD
trObjTDNumber=t;
}
if(trObjOld.childNodes[t]==objClick){
//表示该对象是鼠标放开时的TD
trObjOldNumber=t;
}
}
}
if(trObj.rowIndex>trObjOld.rowIndex || (trObj.rowIndex==trObjOld.rowIndex && trObjTDNumber>trObjOldNumber)){
//表示放开鼠标所在行（2行）大于鼠标点击的行（0行）
//***点击之后的所有单元格往前移动一个单元格，直至放开位置停止
//---------点击之后的所有单元格往前移动一个单元格，直至放开位置停止--------start------------
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
insertAfter(objClick,obj);
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
//---------点击之后的所有单元格往前移动一个单元格，直至放开位置停止--------end------------
}
else if(trObj.rowIndex<trObjOld.rowIndex || (trObj.rowIndex==trObjOld.rowIndex && trObjTDNumber<trObjOldNumber)){
//表示放开鼠标所在行（0行）大于鼠标点击的行（2行）
//***放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止
//---------放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止--------start------------
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
obj.parentNode.insertBefore(objClick,obj);
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
//---------放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止--------end------------
}
}
//设置跨行单元格内容移到表格指定位置
function setSpanRowIsTDToAppoint(objOldAppointPanrentNode)
{
/* //获得TD对象， 保存点击的TD对象内容
var i=0;
while(i<10){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
obj.parentNode.insertBefore(objClick,obj);
*/
while(objOldAppointPanrentNode!=null){
//判断是否需要推移，计算每行多少个单元格
var numTDSun=0;
for(nm=0;nm<objOldAppointPanrentNode.childNodes.length;nm++){
//删除为空的单元格
if(objOldAppointPanrentNode.childNodes[nm].innerHTML=="" || objOldAppointPanrentNode.childNodes[nm].innerHTML.length<11)
{
//执行删除空的单元格
objOldAppointPanrentNode.removeChild(objOldAppointPanrentNode.childNodes[nm]);
nm--;
//nlFlag=true;
//numTDSun--;
continue;
}
if(objOldAppointPanrentNode.childNodes[nm].colSpan==null || objOldAppointPanrentNode.childNodes[nm].colSpan=="")
{
numTDSun++;
}else{
numTDSun+=objOldAppointPanrentNode.childNodes[nm].colSpan;
}
}
//跳过为空的对象
while(objOldAppointPanrentNode.nextSibling!=null && (objOldAppointPanrentNode.nextSibling.innerHTML=="" || objOldAppointPanrentNode.nextSibling.childNodes.length==0)){
objOldAppointPanrentNode.parentNode.removeChild(objOldAppointPanrentNode.nextSibling);
//alert("跳过为空的对象null****!");
}
while(numTDSun>3){//表示需要移动 start
var isEndFlag=false;
if(objOldAppointPanrentNode.nextSibling==null)
{
//没有行，需要创建行
addRow_withInsert(objOldAppointPanrentNode.parentNode,numTDSun);
isEndFlag=true;
//alert("123="+(objOldAppointPanrentNode.nextSibling==null));
//alert(objOldAppointPanrentNode.parentNode.innerHTML);
}
var endObj=objOldAppointPanrentNode.childNodes[objOldAppointPanrentNode.childNodes.length-1];
if(endObj.innerHTML!="")
{
var endObjCLND=endObj.cloneNode(true);
objOldAppointPanrentNode.nextSibling.insertBefore(endObjCLND,objOldAppointPanrentNode.nextSibling.childNodes[0]);
}
if(endObj.colSpan!=null && endObj.colSpan!="" && endObj.colSpan==2){
endObj.innerHTML="";
endObj.colSpan=1;
endObj.width=endObj.offsetWidth/2;
}else{
objOldAppointPanrentNode.removeChild(objOldAppointPanrentNode.childNodes[objOldAppointPanrentNode.childNodes.length-1]);
}
//归零
numTDSun=0;
for(nm=0;nm<objOldAppointPanrentNode.childNodes.length;nm++){
if(objOldAppointPanrentNode.childNodes[nm].colSpan==null || objOldAppointPanrentNode.childNodes[nm].colSpan=="")
{
numTDSun++;
}else{
numTDSun+=objOldAppointPanrentNode.childNodes[nm].colSpan;
}
}//end for
if(isEndFlag==true && numTDSun<=3){//表示已经添加了一行
break;
}
}//表示需要移动 end
if(numTDSun<3 && objOldAppointPanrentNode.nextSibling!=null && objOldAppointPanrentNode.nextSibling.childNodes[0]!=null){//表示需要向上补充移动
var nextObjTD=objOldAppointPanrentNode.nextSibling.childNodes[0];
for(bf=0;bf<objOldAppointPanrentNode.childNodes.length;bf++){
objOldAppointPanrentNode.nextSibling.insertBefore(objOldAppointPanrentNode.childNodes[bf],nextObjTD);
bf--;
}
}
objOldAppointPanrentNode=objOldAppointPanrentNode.nextSibling;
}
//alert(objClick.parentNode.parentNode.innerHTML);
}
//添加行的另一种方法insertRow
function addRow_withInsert(tableObj,numTDSun){
var row=tableObj.insertRow(tableObj.rows.length);
//var countCell=tableObj.rows.item(0).cells.length;
//alert("******="+(6-(numTDSun-3)));
//numTDSun%3==0?(3*(numTDSun/3-1)):
for(var i=0;i<6-(numTDSun-3);i++){
var cell=row.insertCell(i);
cell.innerHTML="<h1>9</h1>";
}
}
//在表格操作位置后面新增一格
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}
</script>
</body>