軟件
                        
    
                            
  • 綜合
    • 
                            
  • 軟件
    • 
                            
  • 文章
    • 
                            
  • 安卓
    • 
                        

                    
搜索

            

            

                pscc2017autocad2018dreamweaver2017草圖大師2017Visio 2016
            

        

    



  

    

      
    

  





  
 當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS代碼實現動態拖放表格的寬度 





  

    
    

      
      

        
JS代碼實現動態拖放表格的寬度

        
2012/10/31 16:13:17作者：佚名來源：網絡

        
移動端
          

        

      

      
            
【實例名稱】
JS代碼實現動態拖放表格的寬度
【實例描述】
表格的寬度一般在頁面設計時被靜態指定：本例學習如何在頁面運行時，動態改變表格的寬度。
【實例代碼】
<html>
<head>
<title>Untitled Document-學無憂（www.yzddtk.cn）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
var dragenable=false;
var x;
var y;
var w;
var h;
var obj;
function init() 
{
    x=event.clientX+document.body.scrollLeft;  
//獲取x坐標
    obj=event.srcElement;                      
//獲取鼠標觸發的元素
    w=event.srcElement.offsetWidth;            
//對象的寬度
    obj.setCapture();                          
//接受鼠標消息
    if(x>event.srcElement.offsetLeft+w-5 && 
x<event.srcElement.offsetLeft+w) {
//鼠標移動到對象邊界時
    dragenable=true;obj.style.cursor='e-resize';}
//改變鼠標的樣式-左右拖動型
}
function drag() 
{
 if(event.clientX+document.body.scrollLeft>event.
srcElement.offsetLeft+event.srcElement.offsetWidth-5 && 
event.clientX+document.body.scrollLeft<event.
srcElement.offsetLeft+event.srcElement.offsetWidth)
  {event.srcElement.style.cursor='e-resize';} 
//改變鼠標的樣式-左右拖動型
 else 
   event.srcElement.style.cursor='default';
//改變鼠標的樣式-默認型
    if(dragenable==true) {
 if(event.clientX+document.body.scrollLeft-x+w>0) {
 var i=obj.cellIndex;
 var j;
 for(j=0;j<obj.parentNode.parentNode.rows.length;j++) {  
//更改表格的寬度
  obj.parentNode.parentNode.rows[j].cells[i].width=
event.clientX+document.body.scrollLeft-x+w;
  }
 }
 else {
  var i=obj.cellIndex;
  var j;
  for(j=0;j<obj.parentNode.parentNode.rows.length;j++) {
   obj.parentNode.parentNode.rows[j].cells[i].width=1; 
//最小也要保持寬度為1
   }
  }
 }
}
function end()                           
//結束更改
{
    dragenable=false;
    obj.releaseCapture();                
//釋放鼠標的捕獲
    obj.style.cursor='default';          
//更改鼠標的樣式為默認
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin=0 topmargin=0>
表格寬度設置為百分比顯示
<br>
<table width="60%" border="1" cellpadding="0" 
cellspacing="2" onmousedown=init() onmouseup=end() 
onmousemove=drag() id=table1 style="table-layout:fixed">
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
</table>
</body>
</html>


【運行效果】
運行效果
【難點剖析】
本例的重點其實是鼠標坐標的獲取。代碼中使用_“event．srcElement”獲取鼠標操作的對象，然后使用“offsetWidth”獲取該對象的寬度。當鼠標移動到表格邊界時，再動態改變鼠標的樣式。
【源碼下載】
如果你不愿復制代碼及提高代碼準確性，你可以點擊：動態拖放表格的寬度 進行本實例源碼下載 

      
      

        

          
       

        

      

      
      

        
標簽：
          表格            

        
      

      
      

        
相關文章

        
      

      
      

        
 熱門軟件/ 推薦游戲/ 手機軟件 

        

          
          
          
          
          
          
        

      

      
      

        

      

      
    


    
    

      

        
資訊分類

      

      

                Dreamweaver
                Flash
                DIV+CSS
                編程其他
              

      

        
推薦教程

      

      

        
      

      

        
精品軟件推薦

      

      

        

          

          
        

      

    

  






            
 ∧ 

        

    


    

        

            Copyright2012-2022 軟件學堂(www.yzddtk.cn).All Rights Reserved

            備案編號:贛ICP備2023000421號
                    

    





欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频 视频,欧美一级特黄录像视频