1

私は2つのテーブルを持っています。一方はもう一方のテーブルのヘッダーとして機能しています（理由は聞かないでください。実際には無関係であり、これは私にとっても他の回答にフィルターされます）。（div id = "tableBody"）<td></td>内の各セルの幅を取得し、それらを別のdivテーブル（id = "tableHeader"）の対応するセルに適用したい<tr><th></th>

したがって、私の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>上部の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 に答える