1

ID sample1 と sample2 の 2 つのテーブルがあります。sample1 には が含まれ<th class="header">、 sample2 には が含まれます<td class="desc">。私がやりたいのは<th>、sample1 でサイズを変更するときに<td>、同じ同期で自動的に sample2 でサイズを変更することだけです。jQueryresizeable()メソッドを使用していますが、取得できません。

助けてください。

参照用のコードは次のとおりです。 

<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>
4

2 に答える 2

6

これはそれを行う必要があります：

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

ここでサイズ変更可能なJQueryの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-04T08:05:06.350 に答える
0

ドキュメントに基づいて試してはいけませんが、次のようになります。

$("#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-04T08:05:27.277 に答える