7

私は2つの別々のテーブルを持っており、両方のテーブルで同時にうまく機能する各trでフォーカス+ホバー機能を使用しています。私の問題はtdの高さです.最初のテーブルからのtdの説明が大きい場合、同じ td と td の高さが変更されますが、最初のテーブル td にのみ変更されます。両方の td を同じサイズにするために、最初のテーブルから td までの高さを記憶し、それを 2 番目のテーブルから td に追加するにはどうすればよいですか。私の例では、最初の 2 つの tr のみが正常に表示され、他の 2 つは最初のテーブル td の説明のために正常に表示されません。

フィドルの例: http://jsfiddle.net/Ksb2W/45/ 

   for bounty  please check this example to see the difference on chrome and ie8:

http://mainpage.ueuo.com/

ありがとうございました。

4

7 に答える 7

22

私があなたを正しく理解しているなら、あなたは両方のテーブルの各行内の高さを同じにしたいですか？

もしそうなら、これはうまくいくはずです：

$("table:first tr").each(function(i) {
    $("table:last tr").eq(i).height($(this).height());
});

明らかに、セレクターの使用は:first理想:last的ではありませんid。セレクターになるように修正する必要があります。

フィドルの例

アップデート

バウンティで言及した問題の解決策は、td要素の境界が考慮されていないためです。

height()現在の行をチェックするときにと置き換えれouterHeight()ば、正常に機能するはずです。

$("table:first tr").each(function(i) {
    $("table:last tr").eq(i).height($(this).outerHeight());
});
于 2012-04-27T13:42:01.333 に答える
3

trすべての要素の最大の高さを取得してから、すべてのtrsの高さをこの高さに設定します。

// get all heights
var heights = rows.map(function () {
    return $(this).height();
}).get();

// use max to get the max !
var maxHeight = Math.max.apply(null, heights);

// set the height
rows.height(maxHeight);

実例

（私はあなたの質問を誤解したかもしれないと思います...これはすべてのtrsの高さを同じ高さに設定します）

于 2012-04-27T13:40:23.580 に答える
3

テーブルにいくつかの ID を追加し、次のコードを追加します。

var rows1 = $("#first tr");
var rows2 = $("#second tr");

rows1.each(function() {
    $(rows2[$(this).index()]).height($(this).height());        
})

ここで jsFiddle が動作しています: http://jsfiddle.net/Ksb2W/51/

于 2012-04-27T13:45:10.253 に答える
2

やりたいことをするために、2つの部分の間に境界線のない空の列を持つテーブルを1つだけ持つことができます。このように、セルの高さはコンテンツに基づいて動的になりますが、テーブルの両側から行内のすべてのセルを消費します。

于 2012-04-27T13:43:02.243 に答える
2

これにより、その場で行の高さが変更されます

$(function(){
    var rows = $('.interactive tr');

    rows.click(function () {
        var i = $(this).GetIndex() + 1; // nth-child is 1-based

        rows.removeClass('selectedRow');
        rows.filter(':nth-child(' + i + ')').addClass('selectedRow').height($(this).children('td')[0].offsetHeight);
    });

    rows.hover(function(){
        var i = $(this).GetIndex() + 1;
        rows.filter(':nth-child(' + i + ')').addClass('hoverx').height($(this).children('td')[0].offsetHeight);;
    },function(){         
        rows.removeClass('hoverx');
    });
});

jQuery.fn.GetIndex = function(){
    return $(this).parent().children().index($(this));
}
于 2012-04-27T13:46:59.443 に答える
2 
    $('#t1 tr').each(function(i) {
    if ($(this).height() > $('#t2 tr:nth-child(' + (i + 1) + ')').height()) 
        $('#t2 tr:nth-child(' + (i + 1) + ')').height($(this).height());
    else if ($(this).height() < $('#t2 tr:nth-child(' + (i + 1) + ')').height()) 
        $(this).height($('#t2 tr:nth-child(' + (i + 1) + ')').height());
});

これをフィドルに追加すると、対応する行が大きい場合、すべての行のサイズが変更されます。この場合、テーブル ID を指定する必要があります。このフィドルのように: http://jsfiddle.net/Ksb2W/88/

于 2012-05-08T12:13:43.437 に答える
2

さて、私は少し遅れていると思います.2番目のテーブルの高さを修正するボタンがここにあります:

http://jsfiddle.net/Ksb2W/54/

そのコード行を document.ready 関数に入れると、うまくいくはずです:

$(function(){
    $('#c').attr('height', $('#b').css('height'));
});

<td>このプロパティを持つ要素の CSS を変更することも重要です。

box-sizing:        border-box;

これは、 table で指定された 2 つのテーブルのすべての行の高さに一致する堅牢なソリューションですid。document.ready 関数の 4 行、css を直接変更する必要はありません:

$('td').css('box-sizing','border-box');
$('#t2').children().children().each(function(i, value) {
    $(this, ':nth-child(1)').attr('height', $('#t1').children().children(':nth-child(' + parseInt(i + 1) + ')').css('height'));
});

ここでフィドルを参照してください: http://jsfiddle.net/Ksb2W/55/

于 2012-04-27T13:57:30.670 に答える