注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

..、、的博客

..、、

 
 
 

日志

 
 

JS动态改变表格宽、高  

2013-04-22 15:59:47|  分类: java |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<script language="javascript">
var currentResizeTdObj=null;
function MouseDownToResize(event,obj)
{
  obj=obj||this;
  event=event||window.event;
  currentResizeTdObj=obj;
  obj.mouseDownX=event.clientX;
  obj.mouseDownY=event.clientY;
  obj.tdW=obj.offsetWidth;
  obj.tdH=obj.offsetHeight;
  if(obj.setCapture)
   obj.setCapture();
  else event.preventDefault();
}
function MouseMoveToResize(event)
{
 if(!currentResizeTdObj) return ;
 var obj=currentResizeTdObj;
 event=event||window.event;
    if(!obj.mouseDownX)
     return false;
    if(obj.parentNode.rowIndex==0)
    {
      var newWidth=obj.tdW*1+event.clientX*1-obj.mouseDownX;
      if(newWidth>0)
       obj.style.width = newWidth;
      else obj.style.width =1;
  }
  if(obj.cellIndex==0)
  {
      var newHeight=obj.tdH*1+event.clientY*1-obj.mouseDownY;
      if(newHeight>0)
       obj.style.height = newHeight;
     else obj.style.height =1;
  }
}
function MouseUpToResize()
{
  if(!currentResizeTdObj) return;
  if (currentResizeTdObj.releaseCapture)
   currentResizeTdObj.releaseCapture();
  currentResizeTdObj=null;
}

function ResizeTable_Init(table,needChangeWidth,needChangeHeight)
{
  if(!needChangeWidth && !needChangeHeight)
     return;
  var oTh=table.rows[0];
  if(needChangeWidth)
  {
      for(var i=0;i<oTh.cells.length;i++)  
      {
         var cell=oTh.cells[i];
         cell.style.cursor="e-resize";
         cell.style.width=cell.offsetWidth;
         cell.onmousedown =MouseDownToResize;
      }
  }
  if(needChangeHeight)
  {
      for(var j=0;j<table.rows.length;j++)  
      {
         var cell=table.rows[j].cells[0];
         cell.style.cursor="s-resize";
         cell.onmousedown =MouseDownToResize;
      }
  }
  if(needChangeWidth && needChangeHeight)
     oTh.cells[0].style.cursor="se-resize";
    table.style.width=null;
    table.style.tableLayout="fixed";
}
</script> 

 

<body>

<div>

<table align="left" border="1" bordercolor="#3366cc" width="2%" id="test1" class="sortable-onload rowstyle-alt colstyle-alt no-arrow" cellpadding="0" cellspacing="1" border="0" bgcolor="#97CBFF" onmousemove="MouseMoveToResize(event);" onmouseup="MouseUpToResize();">
   <tr height="26" bgcolor="#3399cc" ><td>&nbsp;</td></tr>
   <tr height="27"><td>1</td></tr>
   <tr height="27"><td>2</td></tr>
   <tr height="27"><td>3</td></tr>
   <tr height="27"><td>4</td></tr>
   <tr height="27"><td>5</td></tr>
   <tr height="27"><td>6</td></tr>
   <tr height="27"><td>7</td></tr>
   <tr height="27"><td>8</td></tr>
   <tr height="27"><td>9</td></tr>
   <tr height="27"><td>10</td></tr>
   <tr height="27"><td>11</td></tr>
   <tr height="27"><td>12</td></tr>
   <tr height="27"><td>13</td></tr>
   <tr height="27"><td>14</td></tr>
   <tr height="27"><td>15</td></tr>
   </table>
   <script language ="javascript">
ResizeTable_Init(document.getElementById("test1"),true,true);
</script>
   </div>

</body>

  评论这张
 
阅读(257)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017