1

我有2张桌子。一个是作为另一个表的标题（请不要问为什么，这真的无关紧要，这也会过滤到我的其他答案）。我想获取 (div id="tableBody") 中每个单元格的宽度<td></td>并将<tr>它们应用于<th></th>不同 div 表中的相应单元格 (id="tableHeader")

所以我的 HTML 可能如下所示：

<html>
    <body>
       <div class="tableHeader">
           <table>
               <thead>
                   <tr>
                       <th>words</th>
                       <th>words</th>
                       <th>words</th>
                       <th>words</th>
                       <th>words</th>
                       <th>words</th>
                       <th>words</th>
                       <th>words</th>
                   </tr>
               </thead>
           </table>
       </div>
       <div class="tableBody">
           <table>
               <tbody>
                   <tr>
                       <td>words and stuff</td>
                       <td>words and stuff and things</td>
                       <td>words and stuff and some other stuff</td>
                       <td>less stuff</td>
                       <td>4</td>
                       <td>stuff and things</td>
                       <td>things and other things</td>
                       <td>stuff</td>
                   </tr>
                   <tr>
                       <!-- bunch of <td>s -->
                   </tr>
                   <tr>
                       <!-- bunch of <td>s -->
                   </tr>
                   <tr>
                       <!-- bunch of <td>s -->
                   </tr>
                   <!-- etc -->
               </tbody>
           </table>
       </div>
    </body>
</html>

到目前为止，我已经用 jquery 尝试了许多我认为应该可行的不同方法。我只得到<td>top the top 中 s的宽度<tr>。最终，我假设一个数组并且可能必须涉及一个 for 循环。

首先，我试过这个：

$(document).ready(function() {
    var $tableBodyCell = $('.tableBody tr:eq(1) td');
    var $headerCell = $('.tableHeader thead tr th');
    var arr = [];
    var thead = [];
    $tableBodyCell.each(function() {
        var $this=$(this);
        var colWidth = $this.width();
        arr.push(colWidth);
        //alert(arr);
    });

    for(var i = 0; i < $headerCell.length; i++) {
        $headerCell.css('width', arr[i]);
    }
});

当我警告arr[i]时，在 for 循环中，它会返回每个警报的每个独立宽度，但是当我尝试将它应用于 CSS 时，它将循环的最后一个数字应用于所有<th>s

所以我尝试了这个：

$(document).ready(function() {
    var tableBodyCell = $('.tableBody tr:eq(1) td').toArray();
    var headerCell = $('.tableHeader thead tr th').toArray();

    for(var i = 0; i < headerCell.length; i++) {
        //alert($headerCell[i].id + " " + arr[i]);
        headerCell[i].css('width', tableBodyCell[i].css('width'));
        //$(this).css('width',arr[i]);
    }
});

那也没有用。对此的任何帮助将不胜感激。

4

2 回答 2

2

修改后的代码。（假设 tableBodyCell 和 headerCell 的长度相同）jsfiddle

$(document).ready(function() {
    var $tableBodyCell = $('#tableBody tr:first td');
    var $headerCell = $('#tableHeader thead tr th');
    $tableBodyCell.each(function(index){
         $headerCell.eq(index).width($(this).width());
    });
});
于 2013-03-22T19:53:27.337 回答
0 
var theWidth = $("table").eq(0).find("tr > td:first").width();
$("table:gt(0)").find("tr > td:first").width(theWidth + "px");

http://jsfiddle.net/GpLUX/

于 2013-03-22T19:53:45.487 回答