日期:2014-05-17  浏览次数:20703 次

一个让HTML表格实现自动滚动脚本
<!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&g