2

以下代码用于检查目标 div 在溢出（y-overflow）之前可以包含多少行（澄清：文本行）。

它的工作原理是克隆 DOM 元素，清空其内容，然后<br>一次添加一个标签（强制换行），每次检查是否溢出（通过检查是否 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');

一种选择是添加一些内容来防止这种情况发生——即.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 回答