隨着閱覽文章無數 終於讓我找到了 廢話不多說 上代碼
我們可以看到,這裏引用了一個本地的
jquery.min.js文件,需要的小夥伴還請去百度上自行下載
接下來是js,沒錯,沒有花裏胡哨的css
僅僅是在div上面加了一個id<div id="scroll_table" class="col-md-12 bottom_half" >
以及tbody上加了一個id<tbody id="kbTable" >
這裏說一下,是因爲,有的小萌新只知道複製粘貼,也不看源碼
<div>這是一個盒子模型吧
<table>這是一個表格吧
<thead>表格裏面得有個表頭吧</thead>
<tbody>除了表頭還都有顯示數據的表身吧</tbody>
</table>
</div>
來來來,我們再說一下,表頭裏面用啥tr th吖
表身呢 tr td吖
爲了顯示動態的滾動,是不是數據得變
得,直接看源碼吧:
<html>
<head>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $this = $("#scroll_table");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 200);
}).trigger("mouseleave");
function scrollNews(obj) {
var $self = obj.find("tbody");
var lineHeight = $self.find("tr:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("tr:first").appendTo($self);
})
}
})
</script>
</head>
<body>
<div id="scroll_table" class="col-md-12 bottom_half" >
<table width="100%">
<thead>
<tr>
<th>生產線</th>
<th>狀態</th>
<th>操作人</th>
<th>訂單號</th>
<th>工序</th>
<th>在產產品名</th>
<th>在產批次</th>
<th>計劃產量（kg）</th>
<th>目前產量</th>
<th>產量進度</th>
<th>時間進度</th>
<th>當週計劃產量</th>
<th>當週產量進度</th>
</tr>
</thead>
<tbody id="kbTable" >
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>5</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>5</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
效果如圖
可以看到,數據是自己滾動的,這樣我們就可以用來實現某種功能了,例如
數據庫裏一萬多條數據,我總不能一個個手敲吧
源碼附贈:(是例子的源碼啦,這個我還沒做完,等我這個項目全部完善了,會另發文章的)
https://download.csdn.net/download/weixin_43701595/12476925