一个让HTML表格实现自动滚动脚本

最新推荐文章于 2024-06-24 15:18:02 发布

benwdm

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量5k

点赞数 3

分类专栏： T_script&ASP 文章标签：前端 javascript java ViewUI

本文链接：https://blog.csdn.net/benwdm/article/details/84420914

版权

T_script&ASP 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://145.24.16.133:8080/monitor/charts/jquery.min.js"></script>
<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
  var self=this,kids=self.children()
  kids.slice(20).hide();
  setInterval(function(){
    kids.filter(':hidden').eq(0).fadeIn();
    kids.eq(0).fadeOut(function(){
      $(this).appendTo(self)
      kids=self.children();
    });
  },1000);
  return this
}
$(function(){
  $('tbody').infiniteScrollUp();
})
</script>
<title>infiniteScrollUp</title>
</head>

<body>
<table border="1" width="400">
  <colgroup><col /><col /><col /><col /><col /><col /></colgroup>
  <thead>
    <tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
  </thead>
  <tbody>
    <tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1e</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1f</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1g</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1h</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1i</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1j</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1k</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1l</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1m</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1n</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1o</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1p</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1q</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1r</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1s</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1t</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1u</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1v</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1w</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1x</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1y</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
  </tbody>
</table>
</body>
</html>

benwdm

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
一个让HTML表格实现自动滚动脚本

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;&lt;script src="http://145.24.16.133:8080/monitor/charts/jquery.mi
复制链接

扫一扫

专栏目录