하나의 열에 대해서만 마우스 끌기 이벤트에서 두 테이블의 열의 크기를 조정하는 방법은 무엇입니까?

ID가 sample1 인 두 개의 테이블이 있습니다 & sample2. sample1은 <th class="header">이고 sample2는 <td class="desc">입니다. 내가하고 싶은 것은 <th>을 sample1에서 크기를 조정할 때 동일한 동기화에서 자동으로 sample2의 <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

내가 모두 및 에 대한 크기 조정 기능을 가지고 있지만 나는 또한 동일한 비율과 방법으로 자동으로 크기를 조정해야 한 다음 다른 하나의 크기를 조정하려고하면 그들 각 other.Means와 synhronized 싶은 independent.Now 그들이 있습니다. – surajR

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

또한 JQuery와 크기를 조정할 수 here

업데이트에 대한 API를 한 번 봐 가지고 여기

는 참조 코드 이런 식으로 할 수 있습니다.

<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,하지만 난 UR 코드를 시도했지만 같은 방향으로 크기가 조정되지 않습니다. 그 반대 방향으로 happenig. Pls이 UR 기계 에서이 코드를 시도하고 참조하십시오. – surajR

두 테이블에서 너비가 100 %로 나타나는 것을 생각해 보겠습니다. – Falle1234

그러면 어떻게해야합니까? 너비 특성을 제거해야합니까? pls suggest – 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 이것은 작동하지 않습니다. 그냥 크기를 조정합니다. 은 움직이지 않습니다. Pls이 UR 기계 에서이 코드를 시도하고 참조하십시오. – surajR

하나의 열에 대해서만 마우스 끌기 이벤트에서 두 테이블의 열의 크기를 조정하는 방법은 무엇입니까?

답변

관련 문제