jQuery给表格加滚动条

2026-04-01 14:50:36

1、新建html文档。

jQuery给表格加滚动条

2、书写html。

<thead>

<tr>

</tr>

</thead>

<tbody>

<td>Suffolk</td>

</tr>

<tr>

<td>Suffolk</td>

</tr>

<tr>

</tr>

<tr>

<td>Aguada</td>

<td>Aguada</td>

</tr>

<tr>

<td>Aguadilla</td>

<td>Aguadilla</td>

</tr>

<tr>

<td>Aguadilla</td>

<td>Aguadilla</td>

</tr>

<tr>

<td>Aguadilla</td>

<td>Aguadilla</td>

</tr>

<tr>

<td>Maricao</td>

<td>Maricao</td>

</tr>

<tr>

<td>Anasco</td>

<td>Anasco</td>

</tr>

<tr>

<td>Angeles</td>

<td>Utuado</td>

</tr>

<tr>

<td>Arecibo</td>

<td>Arecibo</td>

</tr>

<tr>

<td>Arecibo</td>

<td>Arecibo</td>

</tr>

<tr>

<td>Arecibo</td>

<td>Arecibo</td>

</tr>

<tr>

<td>Bajadero</td>

<td>Arecibo</td>

</tr>

<tr>

<td>Barceloneta</td>

<td>Barceloneta</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</div>

3、书写css样式。

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.demo{width:500px;margin:40px auto 0 auto;}

/* tablescroll */

.tablescroll{font:12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;background-color:#fff;}

.tablescroll td,.tablescroll_wrapper,.tablescroll_head,.tablescroll_foot{border:1px solid #ccc;}

.tablescroll td{padding:5px;}

.tablescroll_wrapper{border-left:0;}

.tablescroll_head{font-size:12px;font-weight:bold;background-color:#eee;border-left:0;border-top:0;margin-bottom:3px;}

.tablescroll thead td{border-right:0;border-bottom:0;}

.tablescroll tbody td{border-right:0;border-bottom:0;}

.tablescroll tbody tr.first td{border-top:0;}

.tablescroll_foot{font-weight:bold;background-color:#eee;border-left:0;border-top:0;margin-top:3px;}

.tablescroll tfoot td{border-right:0;border-bottom:0;}

</style>

jQuery给表格加滚动条

4、书写js并引用js。

$(document).ready(function($){

$('#thetable').tableScroll({

width:480,

height:150

});

</script>

jQuery给表格加滚动条

5、书写tablescroll.js。

;(function($){

var scrollbarWidth = 0;

function getScrollbarWidth()

{

if (scrollbarWidth) return scrollbarWidth;

var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');

$('body').append(div);

var w1 = $('div', div).innerWidth();

div.css('overflow-y', 'auto');

var w2 = $('div', div).innerWidth();

$(div).remove();

scrollbarWidth = (w1 - w2);

return scrollbarWidth;

}

$.fn.tableScroll = function(options)

{

if (options == 'undo')

{

var container = $(this).parent().parent();

container.find('.tablescroll_head thead').prependTo(this);

container.find('.tablescroll_foot tfoot').appendTo(this);

container.before(this);

container.empty();

return;

}

var settings = $.extend({},$.fn.tableScroll.defaults,options);

settings.scrollbarWidth = getScrollbarWidth();

this.each(function()

{

var flush = settings.flush;

var tb = $(this).addClass('tablescroll_body');

var wrapper = $('<div class="tablescroll_wrapper"></div>').insertBefore(tb).append(tb);

if (!wrapper.parent('div').hasClass(settings.containerClass)) {

$('<div></div>').addClass(settings.containerClass).insertBefore(wrapper).append(wrapper);

}

var width = settings.width ? settings.width : tb.outerWidth();

wrapper.css

({

'width': width+'px',

'height': settings.height+'px',

'overflow-y': 'auto',

'overflow-x': 'hidden'

});

tb.css('width',width+'px');

var wrapper_width = wrapper.outerWidth();

var diff = wrapper_width-width;

wrapper.css({width:((width-diff)+settings.scrollbarWidth)+'px'});

tb.css('width',(width-diff)+'px');

if (tb.outerHeight() <= settings.height)

{

wrapper.css({height:'auto',width:(width-diff)+'px'});

flush = false;

}

var has_thead = $('thead',tb).length ? true : false ;

var has_tfoot = $('tfoot',tb).length ? true : false ;

var thead_tr_first = $('thead tr:first',tb);

var tbody_tr_first = $('tbody tr:first',tb);

var tfoot_tr_first = $('tfoot tr:first',tb);

var w = 0;

$('th, td',thead_tr_first).each(function(i)

{

w = $(this).width();

$('th:eq('+i+'), td:eq('+i+')',thead_tr_first).css('width',w+'px');

$('th:eq('+i+'), td:eq('+i+')',tbody_tr_first).css('width',w+'px');

if (has_tfoot) $('th:eq('+i+'), td:eq('+i+')',tfoot_tr_first).css('width',w+'px');

});

if (has_thead)

{

var tbh = $('<table class="tablescroll_head" cellspacing="0"></table>').insertBefore(wrapper).prepend($('thead',tb));

}

if (has_tfoot)

{

var tbf = $('<table class="tablescroll_foot" cellspacing="0"></table>').insertAfter(wrapper).prepend($('tfoot',tb));

}

if (tbh != undefined)

{

tbh.css('width',width+'px');

if (flush)

{

$('tr:first th:last, tr:first td:last',tbh).css('width',(w+settings.scrollbarWidth)+'px');

tbh.css('width',wrapper.outerWidth() + 'px');

}

if (tbf != undefined)

{

tbf.css('width',width+'px');

if (flush)

{

$('tr:first th:last, tr:first td:last',tbf).css('width',(w+settings.scrollbarWidth)+'px');

tbf.css('width',wrapper.outerWidth() + 'px');

}

});

return this;

};

$.fn.tableScroll.defaults =

{

flush: true, // makes the last thead and tbody column flush with the scrollbar

width: null, // width of the table (head, body and foot), null defaults to the tables natural width

height: 100, // height of the scrollable area

containerClass: 'tablescroll' // the plugin wraps the table in a div with this css class

};

})(jQuery);

6、查看效果。

jQuery给表格加滚动条