实现可动态改变宽度的表格简单方法

类别:Asp 点击:0 评论:0 推荐:

<head>
< %
  '生成 css 类 ,用于设置表格
  cssClassName="t"
  cssClassNameMaxID=400
  cssClassNameMinID=1
  minWidth=50
  Response.Write "<style>"
  Response.Write vbcrlf
  for i=cssClassNameMinID to cssClassNameMaxID
     Response.Write "." & cssClassName & i
     Response.Write "{cursor:default;font-size:13;color:ff0000;width:" & (minWidth + i) & "}"
     Response.Write vbcrlf
  next
  Response.Write "</style>"
  % >
</head>
<body onmouseup="mUp();tmUp();">
<table border="0" cellpadding="0"  id="table1"  bgcolor=f0f0f0 cellspacing="0" >
   <tr bgcolor=dddddd height=23>
         <td style='border-bottom:1 solid #707070' background="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_h.gif" class="< %=cssClassName & "100"% >">&nbsp;保镖</td>
   <td style='border-bottom:1 solid #707070' width=5 id="a1"  align="center"  onmousedown="mDown('1')" onmousemove="mMove('1');" onmouseup="mUp()" onmouseout="mOut();" ><img src="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_fgf.gif"  border=0 height=23></td>
   <td style='border-bottom:1 solid #707070' background="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_h.gif" align=center  class="< %=cssClassName & "100"% >">&nbsp;厨师</td>
   <td style='border-bottom:1 solid #707070' width=5 id="a3"  onmousedown="mDown('3')" onmousemove="mMove('3');" onmouseup="mUp()" onmouseout="mOut();" ><img src="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_fgf.gif" border=0 height=23></td>
   <td style='border-bottom:1 solid #707070' background="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_h.gif" align=center  class="< %=cssClassName & "100"% >">&nbsp;司机</td>
         <td style='border-bottom:1 solid #707070' width=5 id="a5"  onmousedown="tmDown()" onmousemove="tmMove();" onmouseup="tmUp()" onmouseout="tmOut();" ><img src="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_fgf.gif" border=0 height=23></td>
  </tr>
  < %
  rcount=1
  for i=1 to 10
     rcount=rcount+1
  % >
  <tr height=23>
   <td style='border-bottom:1 solid #e0e0e0' class="< %=cssClassName & "100"% >" >
      &nbsp;孙悟空
   </td>
   <td style='border-bottom:1 solid #e0e0e0'>&nbsp;</td>
   <td style='border-bottom:1 solid #e0e0e0' class="< %=cssClassName & "100"% >"  align=center >
      &nbsp;猪八戒
   </td>
   <td style='border-bottom:1 solid #e0e0e0'>&nbsp;</td>
   <td style='border-bottom:1 solid #e0e0e0' class="< %=cssClassName & "100"% >"  align=center >
      &nbsp;沙和尚
   </td>
   <td style='border-bottom:1 solid #e0e0e0'>&nbsp;</td>
  </tr>
   < %next% >
</table>
</body>
< script language=javascript>
   
  
   var minWidth="<%=minWdith%>";
   var cNameRoot="<%=cssClassName%>";
   var rowCount="<%=rcount%>";
  
   var mYes="0";
   var mLeft;
   var leftID0;
   var rightID0;
   var misAdjust=1.2  //用于调整误差
  
   var tmYes="0";
  
  
   //定义拖拉时鼠标指针样式
   var ie6;
   ie6 = (window.navigator.appVersion.indexOf("MSIE 6.") !=0)
   if(ie6)
   {
     document.getElementById("a1").style.cursor='col-resize';
     document.getElementById("a3").style.cursor='col-resize';
   }
   else
   {
     document.getElementById("a1").style.cursor='w-resize';
     document.getElementById("a3").style.cursor='w-resize';
   }
   document.getElementById("a5").style.cursor='w-resize';

 
  function mOut()
  {
    mYes="0"
  }
 
  function mUp()
  {
    mYes="0"
  }

  function mDown(curColumn)
  {
    var className0;
    mYes="1";
    className0=document.getElementById("table1").rows[0].cells[parseInt(curColumn)-1].className;
 leftID0=className0.substring(cNameRoot.length,className0.length);
 className0=document.getElementById("table1").rows[0].cells[parseInt(curColumn)+1].className;
 rightID0=className0.substring(cNameRoot.length,className0.length);
    mLeft=event.clientX;
  }
 
  function mMove(curColumn)
  {
     if(mYes=="1")
     {
  var leftID;              
  var rightID;                
  var curLeft;
  curLeft=event.clientX;
    leftID=parseInt(parseInt(leftID0) + (parseInt(curLeft) - parseInt(mLeft)) * misAdjust);
    rightID=parseInt(parseInt(rightID0)  - (parseInt(curLeft) - parseInt(mLeft)) * misAdjust);
       if(parseInt(leftID)>1 && parseInt(rightID)>1)
       {
        for(var i=0;i<rowCount;i++)
     {
    document.getElementById("table1").rows[i].cells[parseInt(curColumn)-1].className=cNameRoot + (leftID);
    document.getElementById("table1").rows[i].cells[parseInt(curColumn)+1].className=cNameRoot + (rightID);   
     }
    }
     }
  }
 
   function tmOut()
  {
    //tmYes="0"
  }
 
  function tmUp()
  {
    tmYes="0"
    window.status="*";
  }
 
  var ColumnCount=(document.getElementById("table1").rows[0].cells.length)/2; 
  var ID0=new Array(ColumnCount);
  var ID1=new Array(ColumnCount);
  var ID2=new Array(ColumnCount);
  var idSum;
 
 function tmDown()
  {
    var className0;
    tmYes="1";
    idSum=0;
    for(var i=0;i<ColumnCount;i++)
    {
  className0=document.getElementById("table1").rows[0].cells[i*2].className;
  ID0[i]=className0.substring(cNameRoot.length,className0.length);
  ID2[i]=0;
  idSum+=parseInt(ID0[i]);
    }
    for(var i=0;i<ColumnCount;i++)
    {
  ID1[i]=ID0[i]/idSum;
    }
    mLeft=event.clientX;
  }
 
 
  function tmMove()
  { 
     if(tmYes=="1")
     {
    var curLeft;
    curLeft=event.clientX;
    for(var i=0;i<ColumnCount;i++)
    {
       ID2[i]=parseInt(ID0[i]) + parseInt((parseInt(curLeft) - parseInt(mLeft)) * ID1[i])
    }
    //window.status = mLeft + ";" + curLeft + "||||" + ID1[0] + ";" + ID1[1] + ";" + ID1[2] + " |||| " + ID0[0] + ";" + ID0[1] + ";" + ID0[2] + " |||| " + ID2[0] + ";" + ID2[1] + ";" + ID2[2] + ";";
    for(var i=0;i<rowCount;i++)
    {
       for(var j=0;j<ColumnCount;j++)
       {
         document.getElementById("table1").rows[i].cells[j*2].className=cNameRoot + (ID2[j]);      
       }
    }
     }
  }
 
< /script>

本文地址:http://com.8s8s.com/it/it7203.htm