网页特效

<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>

你可能感兴趣的:(IE,UP)