固定html表头,滚动时 [英] Fixed html table header while scrolling
本文介绍了固定html表头,滚动时的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下表结构:
< table&
< thead>
< tr>
< th colspan =4>目前< / th>
< th colspan =4>新/请求< / th>
< / tr>
< tr>
< th nowrap =nowrap> RSD& nbsp;& nbsp;& nbsp;& nbsp;< / th>
< th nowrap =nowrap> CRSD& nbsp;& nbsp;& nbsp;& nbsp;< / th>
< th nowrap =nowrap> MSD& nbsp;& nbsp;& nbsp;& nbsp;< / th>
< th nowrap =nowrap>打开QTY& nbsp;& nbsp;& nbsp;& nbsp;< / th>
< th nowrap =nowrap> CRD& nbsp;& nbsp;& nbsp;& nbsp;< / th>
< th nowrap =nowrap> CRSD& nbsp;& nbsp;& nbsp;& nbsp;< / th>
< th nowrap =nowrap> MSD& nbsp;& nbsp;& nbsp;& nbsp;< / th>
< th nowrap =nowrap>打开QTY& nbsp;& nbsp;& nbsp;& nbsp;< / th>
< th nowrap =nowrap> Action< / th>
< th nowrap =nowrap>原因< / th>
< th nowrap =nowrap>操作代码状态< / th>
< / tr>
< tbody>
< tr>
< td>< / td>
< td>< / td>
..... many of rows
< / tr>
< / tbody>
< / thead>
< / table>
我试图修复标题,如果我向下滚动它保持可见。
我查看了此帖,但无法理解。我如何做到这一点?
解决方案
我写了以下代码以实现我的目标
$ b
这是我写的插件。
(function($){
$ .fn.scrollbarTable = function(i){
var o = {};
if(typeof(i)=='number')o.height = i;
else if(typeof(i)=='object')o = i;
else if(typeof(i)=='undefined')o = {
height:300
}
return this.each(function(){
var $ t = $(this);
var w = $ t.width();
$ t.width(w - function(width){
var parent,child;
(width === undefined){
parent = $('< div style =width:50px; height:50px; overflow:auto>< div style =height:50px;& < / div>< / div>')appendTo('body');
child = parent.children();
width = child.innerWidth .innerWidth();
parent.remove();
}
return width;
}());
var cols = [];
var tableCols = [];
$ t.find('thead th,thead td')。each(function(){
cols.push($(this).width());
});
$ t.find('tr:eq(1)th,thead td')。each(function(){
tableCols.push($(this).width());
});
var $ firstRow = $ t.clone();
$ firstRow.find('tbody')。remove();
$ t.find('thead')。remove();
$ t.before($ firstRow);
$ firstRow.find('thead th,thead td')。each(function(i){
$(this).attr('width',cols [i]);
});
$ t.find('tr:first th,tr:first td')每个(function(i){
$(this).attr('width',tableCols [i]);
});
var $ wrap = $('< div>');
$ wrap.css({
width:w,
height:o.height,
overflow:'auto'
});
$ t.wrap($ wrap);
})
};
}(jQuery));
如何使用:
$(document).ready(function(){
$('table#tabss')。scrollbarTable();
}
希望它可以帮助某人。
方式感谢大家的支持...:)
I have the following table structure:
<table>
<thead>
<tr>
<th colspan="4">Current</th>
<th colspan="4">New/Requested</th>
</tr>
<tr>
<th nowrap="nowrap">RSD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">CRD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">Action</th>
<th nowrap="nowrap">Reason</th>
<th nowrap="nowrap">Action Code Status </th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
.....plenty of rows
</tr>
</tbody>
</thead>
</table>
I am trying to fix the header so that if I scroll down it stays visible. I looked at this post but couldn't understand it. How can I do this?
解决方案
I have written the following code in order to achieve my goal (as asked in question)-
Here is the plugin i have written.
(function ($) {
$.fn.scrollbarTable = function (i) {
var o = {};
if (typeof (i) == 'number') o.height = i;
else if (typeof (i) == 'object') o = i;
else if (typeof (i) == 'undefined') o = {
height: 300
}
return this.each(function () {
var $t = $(this);
var w = $t.width();
$t.width(w - function (width) {
var parent, child;
if (width === undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() - child.height(99).innerWidth();
parent.remove();
}
return width;
}());
var cols = [];
var tableCols = [];
$t.find('thead th,thead td').each(function () {
cols.push($(this).width());
});
$t.find('tr:eq(1) th,thead td').each(function () {
tableCols.push($(this).width());
});
var $firstRow = $t.clone();
$firstRow.find('tbody').remove();
$t.find('thead').remove();
$t.before($firstRow);
$firstRow.find('thead th,thead td').each(function (i) {
$(this).attr('width', cols[i]);
});
$t.find('tr:first th,tr:first td').each(function (i) {
$(this).attr('width', tableCols[i]);
});
var $wrap = $('<div>');
$wrap.css({
width: w,
height: o.height,
overflow: 'auto'
});
$t.wrap($wrap);
})
};
}(jQuery));
How to use:
$(document).ready(function(){
$('table#tabss').scrollbarTable();
}
hope it will help someone somewhere..
Any way thanks to all of you for your kind support... :)
这篇关于固定html表头,滚动时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文