如何在鼠标拖动事件中为其中一列调整两个表格的列大小？

我有两个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

如何在鼠标拖动事件中为其中一列调整两个表格的列大小？

回答

相关问题