使用Javascript计算溢出中隐藏的表行数

我有一个bootstrap 3仪表板，在其中我将溢出隐藏在特定的div中。我需要能够识别溢出中隐藏的表行数，这些行在div中不可见。jQuery方法首选，但也可以

我们一直在努力解决这个问题，但到目前为止还没有找到任何方法来计算溢出中隐藏的行数

注意：可见行和不可见行之间没有标记差异，因为CSS使用

overflow:hidden来隐藏多余的行

谢谢

附加#1
这是我正在使用的HTML。高度由javscript在运行时设置



账户
应得的
客户1（MCB#123456789）

职务名称
--今天--
客户2（MCB#123456789）

职务名称
--今天--
客户3（MCB#123456789）

职务名称
--今天--
客户4（MCB#123456789）

职务名称
--明天--
再增加152个职位
现在有了一个数学方法来解决这个问题，假设所有的孩子都有相同的高度（或宽度，取决于你的身高）：


console.log（$（'main div'）.length-$（'main'）.height（）/$（'main div'）.height（））
#主{
高度：200px；/*假设200px*/
溢出：隐藏；
}
#主要部门{
高度：100px；
边框：1px纯黑；
}

你好1
你好2
你好3
你好4
你好5
我不确定你所说的“溢出隐藏”是什么意思。这意味着包括部分隐藏的东西，还是完全隐藏的东西？我的解决方案包括部分隐藏为“未隐藏”

无论如何，
offset
是您的最佳解决方案


let jobs=$（“#jobs list”）；
设offset=jobs.offset（）.top；
设height=jobs.height（）；
设tr=$（“tr”，$（“#作业列表”）.toArray（）；
让停止=0；
for（让我输入tr）
{
设total_offset=$（tr[i]）.offset（）.top-offset；
如果（总偏移量>=高度）
{
停止=i；
打破
}
}
log（“隐藏：”，tr.length-stopped）
作业列表{
高度：80px；
溢出：自动；
}

账户
应得的
客户1（MCB#123456789）

职务名称
--今天--
客户2（MCB#123456789）

职务名称
--今天--
客户3（MCB#123456789）

职务名称
--今天--
客户4（MCB#123456789）

职务名称
--明天--
再增加152个职位
谢谢你的回答

我通过使用jQuery和Kevin Marx的jQuery扩展找到了实现这一点的方法

首先，您需要将jquery.Overflow.js插件添加到页面中


/*overflow.js
*
*基于Elving Rodriguez的Overflow的插件
* http://elvingrodriguez.com/overflowed
*
*/
（函数（$）{
$.fn.overflow=函数（选项，回调）{
var self=这个
变量溢出=[]
var hasCallback=callback&&typeof callback==“函数”？true:false；
var状态=错误
this.options=选项| |窗口
这个。每个（函数（）{
变量$this=$（this）
elPosition=$this.position（）
elWidth=$this.width（）
elHeight=$this.height（）
var parents=$this.parentsUntil（self.options）
var$parentsTo=$（self.options）
parents.push（$parentsTo）
对于（变量i=0；i（parentHeight+parentPosition.top）
||（elPosition.left+elWidth）>（parentWidth+parentPosition.left））{
状态=真
$（父[i]）.addClass（'溢出'）
溢出。推送（父项[i]）
if（hasCallback）回调（父级[i]）
}
}
if（$this.parents（self.options）.hasClass（'overflow'））$this.addClass（'overflow'））
})
如果（！hasCallback）返回溢出。长度>1？溢出：状态
}
})（jQuery）
找到了以下内容：

工作jQuery示例：

JavaScript

$(function() {
  //Add random count of jobs
  var i = 0;
  for (i = 0; i < Math.floor(Math.random() * 100); i++) {
    $("#jobs-list tbody").append($("#jobs-list table tbody tr:last").clone());
  }
  console.log("Created", i, "Jobs");
  console.log("Total", $("#jobs-list table tbody tr:not('.header')").length, "Jobs");
  var mh = $("#jobs-list").height();
  var overflowed = $("#jobs-list table tbody tr:not('.header')").filter(function() {
    return $(this).position().top + $(this).height() > mh;
  });
  console.log("Invisible", overflowed.length, "Jobs");
  $(".job-number").html(overflowed.length);
});

$（函数（）{
//添加作业的随机计数
var i=0；
对于（i=0；imh；
});
log（“不可见”，溢出.length，“作业”）；
$（“.job number”）.html（溢出的.length）；
});

由于
：visible
只统计
隐藏的项目，因此无法真正使用它。我们可以
.filter（）。我们知道每个元素和div的高度。任何大于div高度的，我们都会计算。
是否有标题？还是只有正文？谢谢@Twisty，我添加了示例HTML，让您了解我正在使用的DOM结构。不幸的是，我没有任何关于如何计算隐藏行的javascript示例，因为我甚至无法找到任何指向正确起始位置的指针。Hmm可能会看到is
。is（“：visible”）
会有帮助。但是，这是一个非常好的方法。如果作业名称比正常名称长，那么问题在于行的行高与换行高度相同，并且我不能截断作业名称，因为上下文感知需要全名。我想，如果作业名称长，下一行仍然部分可见？