<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Bootstrap 101 Template</title>
   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
   <style type="text/css">
   .content {
     width: 500px;
     margin: 50px 50px;
     }
     .header {
     line-height: 50px;
     background-color: #ECECEC;
     }
     .data {
     height: 300px;
     overflow: hidden;
     }
     </style>
     </head>
     <body>
     <div class="content">
     <div class="header row">
     <div class="col-md-3">姓名</div>
     <div class="col-md-3">性别</div>
     <div class="col-md-3">年龄</div>
     <div class="col-md-3">职业</div>
     </div>   
     <div class="data">
     <div class="data-content">
     <table class="table table-hover">
     </table>
     </div>
     <div class="data-footer"></div>
     </div></div><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">
     </script><script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
     <script type="text/javascript">
     var html = '';
     for(var i = 0; i < 15; i++) {
     html += '<tr>';
     html += '<td>张三' + i + '</td>';
     if(i % 2 == 0) {
     html += '<td>男</td>';
     } else {
     html += '<td>女</td>';
     }
     html += '<td>' + (10 + i) + '</td>';
     html += '<td>程序员</td>';
     html += '</tr>';
     }
     $('.table').html(html);
     $('td').addClass('col-md-3');
     var dataDOM = $('.data')[0];
     var dataContentDOM = $('.data-content')[0];
     var dataFooterDOM = $('.data-footer')[0];  
     var height = dataDOM.offsetTop + dataDOM.offsetHeight;
     setInterval(function() {
     if(dataFooterDOM.offsetTop - dataDOM.scrollTop - height <= 0) {
     dataDOM.scrollTop -= dataContentDOM.offsetHeight;
     } else {
      dataDOM.scrollTop++;
       }
      },
      20);
      </script>
      </body>
      </html>

html固定表头，表单内容垂直循环滚动的更多相关文章

  1. JS表单内容垂直循环滚动

    参考博客:https://blog.csdn.net/yubo_725/article/details/52839493  大佬是真的厉害,保存一下,以方便后续使用 效果: 源码: <!DOCT ...

  2. c#程序为PDF文件填写表单内容

    众所周知,PDF文件一般情况下是无法修改的,如果你有一张现成的PDF表格,这时想通过编程实现从数据库或者动态生成内容去填写这张表格,就会有些问题了,首先我们要解决以下2个重要的问题: 1.如何将内容写 ...

  3. Django--post提交表单内容

    本节目标:①.提交表单内容②.通过客户端提交表单新增一篇文章③.通过Django的forms组件来完成新增一篇文章 =======提交表单内容======== 1.前端html:login.html ...

  4. 分页功能实现之通过ajax实现表单内容刷新

    拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...

  5. HTTP上下文表单内容转为实体对象

    using ServiceStack.Web; using System; using System.Collections.Generic; using System.Linq; using Sys ...

  6. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. c#使用itextsharp输出pdf(动态填充表单内容,显示中文)

    相关链接: iText的简单应用-字体 c#程序为PDF文件填写表单内容 示例代码: static void Main(string[] args) { BaseFont font = BaseFon ...

  8. 清除input表单内容

    碰到几次情况,页面刷新或者从上级页面返回表单的内容依然遗留,很影响使用. <form action="" method="" autocomplete=& ...

  9. jquery获取form表单内容以及绑定数据到form表单

    在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...

随机推荐

  1. luogu P4314 CPU监控

    传送门 这是个远古巨坑阿qwq 没有历史最大值还是能比较好做的.可能会有一个想法,就是直接维护线段树每个结点出现过的历史最大值,每次最大值变化就更新.但是有个问题:可能一个点能影响历史最大值的标记还没 ...

  2. Karel版本的nnet1

    除了chain,nnet1, nnet2, nnet3训练时调整转移模型,chain模型使用类似与MMI的训练准则 概要 Karel Vesely的nnet1用到以下技术: 每一层进行预训练,基于RB ...

  3. Flume配置Replicating Channel Selector

    1 官网内容 上面的配置是r1获取到的内容会同时复制到c1 c2 c3 三个channel里面 2 详细配置信息 # Name the components on this agent a1.sour ...

  4. python之接口开发基础知识

    一.开发接口的作用 1.mock 服务:在别的接口没有开发完成的时候可以模拟一些接口以便测试已经开发完成的接口,例如假的支付接口,模拟支付成功.支付失败. 2.了解接口是如何实现的:数据交互.数据返回 ...

  5. linux sqlite replace into

    sqlite replace into 文档详细说明: http://blog.sina.com.cn/s/blog_590be5290102vulh.html 这点很重要: 一般用replace语句 ...

  6. G - Intersecting Rectangles Kattis - intersectingrectangles （扫描线）（判断多个矩形相交）

    题目链接: G - Intersecting Rectangles Kattis - intersectingrectangles 题目大意:给你n个矩形,每一个矩形给你这个矩形的左下角的坐标和右上角 ...

  7. 线程池-Executors

    合理使用线程池能够带来三个好处 减少创建和销毁线程上所花的时间以及系统资源的开销 提高响应速度.当任务到达时,任务可以不需要等到线程创建就能立即执行 提高线程的客观理性.线程是稀缺资源,如果无限制的创 ...

  8. Zookeeper学习笔记4

    开源客户端 ZkClient <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId ...

  9. golang interface 转 string,int,float64

    func interface2String(inter interface{}) { switch inter.(type) { case string: fmt.Println("stri ...

  10. 【转】python3解析库lxml

    转自:http://www.cnblogs.com/zhangxinqi/p/9210211.html 阅读目录 1.python库lxml的安装 2.XPath常用规则 (1)读取文本解析节点 (2 ...