2

次のコードは、オーバーフロー（y-overflow）する前にターゲットdivに含めることができる行数（明確化：テキスト行）を確認するために使用されます。

これは、DOM要素のクローンを作成し、その内容を空にしてから、<br>タグを1つずつ追加して（新しい行を強制するため）、オーバーフローがないか毎回チェックする（scrollHeight> clientHeightかどうかをチェックする）ことで機能します。

デバッグ中に、ChomeとFFで機能することに気付きましたが、IE9では、
挿入されたタグの数に関係なく垂直スクロールバーが表示されないため、ループが正しく終了しません。IEで動作させる方法はありますか？

http://jsfiddle.net/zbdbq/5/

function checkNumRows (obj){
    var overflow = false, rows = 0;

    var measureDiv = obj.clone().empty().css('overflow', 'auto'); //make a clone of the original
    measureDiv.appendTo(obj.parent()); //append it to DOM
    while (!overflow && rows < 500) {//set upper limit to 500 rows to prevent infinite looping for whatever reason
        measureDiv.append('<br>');
        overflow = measureDiv[0].scrollHeight > measureDiv[0].clientHeight ? true : false;
        rows = rows + 1;
    }

    measureDiv.remove(); //cleanup
    return rows - 1; //return max rows before overflow occured
}

alert(checkNumRows($("#testDiv"))); //IE incorrectly returns num rows as the max 499​
4

4 に答える 4

2

これはうまくいくはずです：

function checkNumRows (obj){
    var measureDiv = obj.clone().empty().appendTo(obj.parent());

    $span = $('<span>X</span>').appendTo(measureDiv);
    rows = Math.floor(measureDiv.height() / $span.height());

    measureDiv.remove();
    return rows;
}

alert(checkNumRows($("#testDiv")));

http://jsfiddle.net/zbdbq/13/

たぶん、より良い結果を得るために遊んでください$span.outerHeight()..

于 2012-10-13T23:23:11.847 に答える
1

「行」が自動的にサイズ変更されたインライン要素を意味する場合は、lineHeight CSS スタイルに基づいてチェックしてみてください。

function checkNumRows(obj) {
    var line_height = parseInt(obj.css('lineHeight').replace('/em|px/', ''));
    var max_rows = Math.floor(obj.height()/line_height);

    return max_rows;
}
于 2012-10-09T20:58:44.340 に答える
1

コードに最小限の変更を加えて、複製された要素にアイテムを追加するときに、少し「コンテンツ」を追加してみてください。私は 100% 思い出すことはできませんが、IE は空白スペースの崩壊を楽しんでいることを覚えているようです。

あなたのフィドルでは、 empty() （要素を空にする）を呼び出してから、それ自体が空の br 要素をいくつか追加します-

 var measureDiv = obj.clone().empty().css('overflow', 'auto');

1つのオプションは、これを防ぐためにいくつかのコンテンツを追加することです-つまり、.append('&nbsp;<br>') http://jsfiddle.net/zbdbq/9

同じように、最初から空の要素がないことを確認できると思います- obj.clone().empty().html('&nbsp;')... http://jsfiddle.net/zbdbq/10/

于 2012-10-10T06:21:46.943 に答える
0

見た目でjQueryを使用しているので、これを直接行う必要があります。

$("#myTable > tbody > tr").length

この関数は、ここで「myTable」で指定されたイミディエートテーブルの行のみをカウントします。ネストされたテーブルも考慮したい場合は、以下を使用する必要があります。

$('#myTable tr').length;
于 2012-10-09T15:22:54.130 に答える