1

我有两个 ID 为 sample1 和 sample2 的表。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 resizable 的 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 回答