如何在鼠標拖動事件中爲其中一列調整兩個表格的列大小？

我有兩個ID爲sample1 & sample2的表。 sample1包含<th class="header">，sample2包含<td class="desc">。我想要做的就是當我在sample1中調整<th>的大小時，它也應該自動調整樣本2中的<td>以相同的同步。我正在使用jQuery resizeable()方法，但我沒有得到它。如何在鼠標拖動事件中爲其中一列調整兩個表格的列大小？

請幫助。

這裏是參考代碼：

<script type="text/javascript" charset="utf-8"> 
      $(function() {    
       $("#sample1 .header").resizable(); 
       $("#sample2 .desc").resizable(); 
      }); 
     </script> 

</head> 
<body> 
    <div class="center" > 



     <table id="sample1" width="100%" border="0" cellpadding="0" cellspacing="0"> 
      <tr> 
       <th class="header">header</th><th class="header">header</th> 
      </tr> 
     </table> 
     <table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0"> 
      <tr> 
       <td class="desc">cell</td> 
       <td class="desc">cell</td> 
      </tr> 
      <tr> 
       <td class="desc">cell</td> 
       <td class="desc">cell</td> 
      </tr> 
      <tr> 
       <td class="desc">cell</td> 
       <td class="desc">cell</td> 
      </tr>                 
     </table> 


    </div> 




</body> 
</html>

來源

2012-05-04 surajR

我有兩個和可調整大小的功能，但他們independent.Now我希望他們每個other.Means被synhronized如果嘗試調整之一，那麼另一個也應該在相同的比例和方式自動調整大小。 – surajR

這應做到：

$(function() {    
    $("#sample1 .header").resizable({ 
      alsoResize: "#sample2 .desc"}); 
    $("#sample2 .desc").resizable({ 
      alsoResize: "#sample1 .header"}); 
});

也有看API jQuery的調整大小here

更新：

你可以做這樣的事情。

<html> 
    <head> 
     <style> 
      .header,.desc{ 
       width: 100px; 
      } 
     </style> 
     <script type="text/javascript" charset="utf-8"> 
      $(function() {       
       $("#sample1 .header").resizable({ 
        alsoResize: "#sample2 .desc"}); 
       $("#sample2 .desc").resizable({ 
        alsoResize: "#sample1 .header"}); 
      }); 
     </script> 
    </head> 
    <body> 
     <div class="center">  
      <table id="sample1" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
         <th class="header">header</th> 
         <th class="header">header</th> 
       </tr> 
      </table> 
      <table id="sample2" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td class="desc">cell</td> 
        <td class="desc">cell</td> 
       </tr> 
       <tr> 
        <td class="desc">cell</td> 
        <td class="desc">cell</td> 
       </tr> 
       <tr> 
        <td class="desc">cell</td> 
        <td class="desc">cell</td> 
       </tr>                 
      </table> 
     </div>  
    </body> 
</html>

來源

2012-05-04 08:05:06 Falle1234

謝謝Falle1234，但我嘗試過我們的代碼，但它沒有在同一方向上調整大小。它在相反的方向碰撞。請在你的機器上試試這個代碼，看看。 – surajR

我認爲你看到的是由兩個表 – Falle1234

上的100％寬度造成的，那麼我應該怎麼做？我應該刪除寬度屬性？請建議 – surajR

還沒有嘗試，但在documentation基地，它應該是：

$("#sample1 .header").resizable({ alsoResize: "#sample2 .desc" });

編輯：這是你想要的嗎？

<script type="text/javascript" charset="utf-8"> 
    $(function() { 
     $("#sample1 .header1").resizable({ alsoResize: "#sample2 .desc1" }); 
     $("#sample1 .header2").resizable({ alsoResize: "#sample2 .desc2" }); 
    }); 
     </script> 
</head> 
<body> 
    <div class="center" > 
     <table id="sample1" style="width:auto" border="1" cellpadding="0" cellspacing="0"> 
      <tr> 
       <th class="header1">header</th><th class="header2">header</th> 
      </tr> 
     </table> 
     <table id="sample2" style="width:auto" border="1" cellpadding="0" cellspacing="0"> 
      <tr> 
       <td class="desc1">cell</td> 
       <td class="desc2">cell</td> 
      </tr> 
      <tr> 
       <td class="desc1">cell</td> 
       <td class="desc2">cell</td> 
      </tr> 
      <tr> 
       <td class="desc1">cell</td> 
       <td class="desc2">cell</td> 
      </tr>                 
     </table> 
    </div> 
</body> 
</html>

來源

2012-05-04 08:05:27 fankt

嗨@ evanc3這不工作。它只是調整。是無動於衷。請在你的機器上試試這個代碼，看看。 – surajR

如何在鼠標拖動事件中爲其中一列調整兩個表格的列大小？

回答

相關問題