-------------------------------
三年前的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>
相关推荐
主要介绍了CSS设置table下tbody的滚动条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下 js代码 [removed] function test(){ var $objTr = $(#location); //找到要定位的地方 tr $objTr.css...
* 取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(document.documentElement&&document;.documentElement.scrollTop) { scrollTop=document.documentElement....
样式： 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent...复制代码代码如下: <div> <table class=”con_tbl”> <tr class=”fixedHead”> 标题不动</th> </tr> ”code”> <t
我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度，造成表头 数据 的div宽度不...
bootstrap-table下表格中增加操作的btn，如果是下拉菜单，那么在每一页最后一行点击下拉菜单，会出现滚动条，解决方法： 修改这个类，但是这个类改了会有点影响toolbar的显示，不过问题不大，加个margin就可以了 ....
jQuery实现滚动条滚动到子元素位置（方便定位） 关键代码如下所示： <table class=high id=nurse-plan> <tr id=tr-one></tr> <tr id=tr-two></tr> <tr id=tr-three></tr> <tr id=tr-four></tr> </table> jQuery...
一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative，用ie6/7测试以下代码： Code <!DOCTYPE ...
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> <table> <tr> <th><div>标题一</div></th> <th>...
思路就是 ...复制代码代码如下: <table class=”table”> <thead> <tr> <th>Id</th> <th>Name</th> <th>Category</th> <th>MonthAmount</th> <th>hasBackUp</th> <th>score</th> </tr> </thead> <
如果要出现水平滚动条，则： overflow-x:auto同理，垂直滚动条为： overflow-y:auto如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative 例如： <HTML> <HEAD> <TITLE>...
在某项目中遇到excel导入时客户要求显示滚动条效果，在此基础上使用js为其封装了个进度条类，只需要简单为其创建个div容器就可轻松实现效果，类具体如下： <!DOCTYPE html> <html lang=zh-CN> <head&...
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <... <head>... <div class=table-responsive> <tabl
<tr id=tr-one></tr> <tr id=tr-two></tr> <tr id=tr-three></tr> <tr id=tr-four></tr> </table> jQuery: $(#nurse).scrollTop($(#nurse).scrollTop() + $('#tr-three').offset().top -
默认的100%宽要实现改变窗口大小也100%的话，在table元素上添加width=”100%”,至于css的100%为什么不生效，原因未知。 下面就说说设置如何给datatables设置固定的宽度。 1、html代码 <table id=userTable class=...
一、项目说明 ①此项目是ASP.NET项目，开发语言是C# ②bootstrap-table使用需要下载对应的css和js插件 ... ②table-responsive：有table-responsive，表格有滚动条没有table-responsive，网页有滚动
前言：之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研究了下x-editable组件，遇到过一些坑，再此做个...
最近项目里面有一个表格需求，该表格列是动态产生的，而且列的数量操作一定值以后就会出现横向滚动条，滚动的时候需要前面几列固定。也就是所谓的excel的冻结列功能。该如何实现呢？不用多说，当然是查文档，于是...
.pre-scrollable高度超出340px，就会在Y轴出现滚动条 表格class .table基础表格margin-bottom:20px，在thead底部2px的浅灰实线，每个单元格顶部1px的浅灰实线 .table-striped：斑马线表格，隔行有一个浅灰色的背景色...
还有人很变态地用这三个标签做出标题能跟随表格，或者tbody固定高度，走出自动出现滚动条的功能。 复制代码代码如下:<title>thead、tfoot 以及 tbody标签</title> <table border=”1″> <thead> <tr> ...