您的位置：首页 > Web前端 > JavaScript

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

2005-07-14 21:10 956 查看

<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"% >"> 保镖</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"% >"> 厨师</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"% >"> 司机</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"% >" >
      孙悟空
   </td>
   <td style='border-bottom:1 solid #e0e0e0'> </td>
   <td style='border-bottom:1 solid #e0e0e0' class="< %=cssClassName & "100"% >" align=center >
      猪八戒
   </td>
   <td style='border-bottom:1 solid #e0e0e0'> </td>
   <td style='border-bottom:1 solid #e0e0e0' class="< %=cssClassName & "100"% >" align=center >
      沙和尚
   </td>
   <td style='border-bottom:1 solid #e0e0e0'> </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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function table border class javascript ie

相关文章推荐

新的分享

章节导航