-------------------------------
三年前的copy来的代码
当时使用没问题
现在使用高版本jquery 却出现了问题
把 $sb.attr("scrollHeight")
改成了 $sb[0].scrollHeight
又可以用了
--------------------------------
<html>
<head>
<title>Untitled</title>
<script type="text/javascript"
src="http://localhost:8080/oa/resources/plug/jquery/1.11.2/jquery-1.11.2.min.js"></script>
<script type="text/Javascript">
$(function(){
var table = $('table.scrolltable').each(function(){
var $table = $(this).css('border-collapse','collapse');
var $tbody = $table.find('tbody').eq(0);
var sbPosition = {left: $tbody.position().left + $tbody.outerWidth(), top: $tbody.position().top };
var $scrollbar = $('<div class="scrollbar"/>').css({'position':'absolute', 'overflow-y':'auto',left:sbPosition.left, top:sbPosition.top, height:'0px',width:'20px'})
.append($('<div/>'))
.appendTo($table.parent());
$table.bind('rownum',function(event, newRowNum){
var nFirst = parseInt($tbody.attr('itemIndex') || '0');
$tbody.find('tr').hide();
$tbody.find('tr').each(function(i){
if( i >= nFirst && i < nFirst + newRowNum)
{
$(this).show();
}
else
{
$(this).hide();
}
});
var scrollHeight = $tbody.find('tr').length * $tbody.height() / newRowNum;
var $sb = $scrollbar;
$sb.css('height',$tbody.height());
$sb.find('div').eq(0).css('height',scrollHeight);
});
$scrollbar.scroll(function(){
$sb = $(this);
debugger;
var nNewIndex = Math.floor($sb.scrollTop() / $sb[0].scrollHeight * $tbody.find('tr').length);
var nIndex = parseInt($tbody.attr('itemIndex') || '0');
var rownum = parseInt($table.attr('rownum') || '10');
if(nIndex != nNewIndex)
{
$tbody.find('tr').each(function(i){
if(i >= nNewIndex && i < nNewIndex + rownum)
{
$(this).show();
}
else
{
$(this).hide();
}
});
$tbody.attr('itemIndex', nNewIndex);
}
});
$table.trigger('rownum',parseInt($table.attr('rownum')));
});
});
</script>
<style type="text/css">
.scrollbar {
border: solid 1px red;
}
.scrolltable {
}
</style>
</head>
<body>
<table class="scrolltable" border="1" rownum="5">
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
<th>eee</th>
<th>fff</th>
</tr>
</thead>
<tbody>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
</tbody>
<tfoot>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tfoot>
</table>
</body>
</html>
相关推荐
为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先，让我们了解一下HTML表格的基本结构。一个HTML表格由`<table>`元素开始...
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
综上所述，"TABLE滚动条"不仅涉及HTML表格的基本使用，还包括CSS的样式控制，JavaScript的事件监听和滚动操作，以及可能的响应式设计和第三方库的应用。深入研究这一主题，可以提升前端开发中用户体验的设计和实现...
在网页设计中，当表格（Table）中的数据过多时，为保持页面的整洁与易读性，通常会采用滚动条来展示超出视口范围的内容。本示例将详细讲解如何利用jQuery库为普通的HTML表格添加滚动条，以实现数据的高效浏览。 一...
在一些情况下，当表格数据过多，无法在一个屏幕内完全显示时，可以利用滚动条来提供更友好的用户体验。本篇将深入探讨如何在HTML表格中实现两种形式的滚动条。 1. 垂直滚动条 在HTML中，可以通过设置`<table>`元素...
此外，CSS还可以用来调整表格的滚动行为，比如使用`overflow: auto`属性来创建滚动条，并通过`position`和`z-index`控制元素的层叠顺序，确保隐藏副本在合适的时候显示。 关键在于JavaScript，它是实现无限循环的...
CSS设置table下tbody的滚动条实现是一种网页布局技术，能够让HTML表格的tbody部分在内容超出可视区域时显示出垂直滚动条，而thead（表头）则保持固定不动。这种技术在制作具有大量数据内容的网页表格时非常有用，...
在网页设计中，当表格数据过多时，为了保持可读性，通常会使用滚动条来显示隐藏的内容。然而，一个常见的需求是使表格的表头在滚动时始终保持可见，这样用户在浏览长表格时仍能清楚地看到列名。本文将详细介绍如何仅...
本文将详细解释如何实现这个功能，主要涉及`div`和`table`元素的布局、CSS样式以及滚动条的控制。 首先，为了实现横向滚动条，我们需要将`table`元素包裹在一个`div`容器内。这个`div`设置`overflow-x:auto`属性，...
本文将详细介绍如何在JSP（JavaServer Pages）中实现一个带有滚动条的table表格，通过实例代码来帮助理解这一功能。 首先，让我们了解基本的HTML表格结构。在HTML中，`<table>`元素用于创建表格，而`<tr>`定义表格...
在这个特定的问题中，我们关注的是如何使用jQuery来实现一个可拖动调整宽度的table表格，并在宽度调整到一定程度时隐藏其中的内容。 首先，我们需要理解HTML中的`<table>`元素，它是用来展示结构化数据的，通常由行...
### 公告滚动条显示知识点解析 #### 一、知识点概览 本篇文章将围绕一个前端公告滚动条的实现进行详细解析。该滚动条通过HTML、CSS与JavaScript结合使用，能够在网页前端展示需要滚动的公告内容，从而为用户提供...
本压缩包“HTML带滚动条的自动根据窗口宽度缩放的表格.zip”包含了一个实现特定功能的示例，即当浏览器窗口大小改变时，表格能够自动调整列宽并显示滚动条，以保持良好的可读性和用户体验。 这个示例可能涉及以下几...
在JavaScript中，我们可以利用CSS样式来控制滚动条的显示和隐藏。例如，可以使用`overflow`属性来设定元素的溢出行为，`overflow-y: scroll;`表示始终显示垂直滚动条，`overflow-x: auto;`则会在内容超过容器宽度时...
总的来说，通过合理的CSS样式设置，我们可以轻松实现ASP.NET页面中固定表头、自动滚动条以及列对齐的效果。这对于展示大量数据的网页来说非常实用，既能保持界面的整洁，又能提供良好的用户体验。
"固定Table行列滚动"的主题就是针对这样的需求，它涉及到HTML表格（Table）、行（Row）和列（Col）的定位以及滚动条的实现。在网页中，我们可能需要一个表格来展示大量信息，但屏幕空间有限，这时候就需要实现表格的...
本话题将深入探讨如何使用jQuery实现表格添加滚动条的功能，并固定表头，这在处理大量数据时非常有用，因为可以保持表头可见，方便用户在滚动时查看列名。我们将基于提供的"superTables.js"和"superTables"这两个...
要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下 js代码 [removed] function test(){ var $objTr = $(#location); //找到要定位的地方 tr $objTr.css...
首先，我们来探讨CSS在创建滚动条样式上的关键属性。CSS3引入了一些新的伪元素和属性，如`::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`和`::-webkit-scrollbar-track`，它们允许我们自定义滚动条的外观。例如...
样式： 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent...复制代码代码如下: <div> <table class=”con_tbl”> <tr class=”fixedHead”> 标题不动</th> </tr> ”code”> <t