如何将Gridview的数据按时间段显示？

学习中碰到一个问题，自己没想出解决方法，特来请教大神们。
有如图所示的一个表，要求客户端全屏显示三行，分别为上一时段、当前时段、下一时段的内容，按时段滚动显示。当前时段要突出显示（设定指定背景或边框等）。

解决方案 »

  1.   

    取数据就取三段的，每行占33%的高度，定时刷新数据。
    也可以用DIV布局
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
        *{padding:0px;margin:0px;list-style-type: none;}
         #content{width:1200px;background:#ccc;margin:0px auto;padding:20px 0px;}
         #content ul li{width:100%;border:1px solid black;background:#f80;margin:3px 0px;text-align: center;font-size: 40px;color:white;}
      </style>
    </head>
    <body>
     <div id="content">
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
       </ul>
     </div>
    <script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
    <script type="text/javascript">
       $(function(){
         var num=$("#content ul li").size() //li的个数
         var li_height=$(window).height()/3 //让li的高度为页面的1/3
         $("#content ul li").height(li_height) //设置li高度为
         $(window).scroll(function(){  //滚动条监听
            for(var a=0;a<num;a++){  //每滚动一次监听所有的li距离窗口最顶端的距离
              var o_top=$("#content ul li").eq(a).offset().top-$(window).scrollTop()//計算每个li距离窗口最顶端的距离
              if(o_top>=(li_height/2)&&o_top<=(li_height+(li_height/3))){ //判断当前li否在页面中央并改变其样式
                $("#content ul li").eq(a).css("background","#000")
                $("#content ul li").eq(a).siblings("li").css("background","#f80")
              }
            }
            
         })
       })
    </script>
    </body>
    </html>
    自己引入jquery直接复制拿去