html表格 行 自动向上,jQuery table表格无缝向上滚动效果

HtmlCssJs

排名

地市

纯枪量(吨)

1

大连

2470.48

2

大连2

2470.48

3

大连3

2470.48

4

大连4

2470.48

5

大连5

2470.48

6

大连6

2470.48

7

大连7

2470.48

8

大连8

2470.48

9

大连9

2470.48

10

大连10

2470.48

11

大连11

2470.48

12

大连12

2470.48

13

大连13

2470.48

14

大连14

2470.48

15

大连15

2470.48

table,tbody,tfoot,thead,tr,th,td {

margin:0;

padding:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

border-collapse:collapse;

border-spacing:0;

border:0px;

}

.tablebox {

width:300px;

height:400px;

overflow:hidden;

margin:50px auto;

}

.tablebox table {

width:100%;

}

.tablebox table th,.tablebox table td {

font-size:12px;

text-align:center;

line-height:36px;

}

.tablebox table th {

color:#2584e3;

background-color:#f6f6f6;

}

.tablebox table td img {

display:inline-block;

vertical-align:middle;

}

.tablebox table tbody tr:nth-child(even) {

background-color:#f6f6f6;

}

.tablebox.table_md table td,.tablebox.table_md table th {

line-height:40px;

}

// 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动

tableScroll('tableId', 400, 30, 10)

var MyMarhq;

function tableScroll(tableid, hei, speed, len) {

clearTimeout(MyMarhq);

$('#' + tableid).parent().find('.tableid_').remove()

$('#' + tableid).parent().prepend(

'' + $('#' + tableid + ' thead').html() + ''

).css({

'position': 'relative',

'overflow': 'hidden',

'height': hei + 'px'

})

$(".tableid_").find('th').each(function(i) {

$(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());

});

$(".tableid_").css({

'position': 'absolute',

'top': 0,

'left': 0,

'z-index': 9

})

$('#' + tableid).css({

'position': 'absolute',

'top': 0,

'left': 0,

'z-index': 1

})

if ($('#' + tableid).find('tbody tr').length > len) {

$('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());

$(".tableid_").css('top', 0);

$('#' + tableid).css('top', 0);

var tblTop = 0;

var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();

function Marqueehq() {

if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {

tblTop = 0;

} else {

tblTop -= 1;

}

$('#' + tableid).css('margin-top', tblTop + 'px');

clearTimeout(MyMarhq);

MyMarhq = setTimeout(function() {

Marqueehq()

}, speed);

}

MyMarhq = setTimeout(Marqueehq, speed);

$('#' + tableid).find('tbody').hover(function() {

clearTimeout(MyMarhq);

}, function() {

clearTimeout(MyMarhq);

if ($('#' + tableid).find('tbody tr').length > len) {

MyMarhq = setTimeout(Marqueehq, speed);

}

})

}

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3