html固定表头,表单内容垂直循环滚动
<!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固定表头,表单内容垂直循环滚动的更多相关文章
- JS表单内容垂直循环滚动
参考博客:https://blog.csdn.net/yubo_725/article/details/52839493 大佬是真的厉害,保存一下,以方便后续使用 效果: 源码: <!DOCT ...
- c#程序为PDF文件填写表单内容
众所周知,PDF文件一般情况下是无法修改的,如果你有一张现成的PDF表格,这时想通过编程实现从数据库或者动态生成内容去填写这张表格,就会有些问题了,首先我们要解决以下2个重要的问题: 1.如何将内容写 ...
- Django--post提交表单内容
本节目标:①.提交表单内容②.通过客户端提交表单新增一篇文章③.通过Django的forms组件来完成新增一篇文章 =======提交表单内容======== 1.前端html:login.html ...
- 分页功能实现之通过ajax实现表单内容刷新
拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...
- HTTP上下文表单内容转为实体对象
using ServiceStack.Web; using System; using System.Collections.Generic; using System.Linq; using Sys ...
- js控制select选中显示不同表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- c#使用itextsharp输出pdf(动态填充表单内容,显示中文)
相关链接: iText的简单应用-字体 c#程序为PDF文件填写表单内容 示例代码: static void Main(string[] args) { BaseFont font = BaseFon ...
- 清除input表单内容
碰到几次情况,页面刷新或者从上级页面返回表单的内容依然遗留,很影响使用. <form action="" method="" autocomplete=& ...
- jquery获取form表单内容以及绑定数据到form表单
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
随机推荐
- c2d遮罩
ClippingNode 节点 ClippingNode setStencil 设置模版 只有模版的区域显示此节点内容 使用了Opengl的 模板测试 http://www.cnblogs.com ...
- 嵌入式开发 迅为4418开发板Qt移植移动4G模块第一部分
本文转自迅为论坛:http://topeetboard.com 了解更多:https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-7744162139 ...
- UOJ #276「清华集训2016」汽水
为什么你们常数都这么小啊 UOJ #276 题意:在树上找一条链使得|边权平均值$ -k$|尽量小,$ n<=5e4$ $ Solution:$ 首先二分答案$ ans$,即我们需要找一条链使得 ...
- 【blog】SpringBoot聚合项目打包问题
在需要打包的模块的pom中,必须加上如下配置 <build> <plugins> <plugin> <groupId>org.springframewo ...
- JSR
JSR是Java Specification Requests的缩写,意思是Java 规范提案.是指向JCP(Java Community Process)提出新增一个标准化技术规范的正式请求.任何人 ...
- oracle 索引的创建与使用
什么是数据库索引 在关系数据库中,索引是一种与表有关的数据库结构,它可以使对应于表的SQL语句执行得更快. 索引的作用相当于图书的目录,可以根据目录中的页码快速找到所需的内容. 对于数据库来说,索引是 ...
- RVIZ 保存配置 and 使用配置
每次无参数启动RVIZ, 都会使用配置 -/.rviz/default.rviz 如果每次是正常退出的话,上一次的配置会被保存到文件-/.rviz/default.rviz 需要另外保存成配置文件的话 ...
- 很清晰的解读i2c协议【转】
转自:https://blog.csdn.net/weixin_41718085/article/details/79376823 转载:http://dpinglee.blog.163.com/bl ...
- Django 中的 model 继承
Django 中的 model 继承和 Python 中的类继承非常相似,只不过你要选择具体的实现方式:让父 model 拥有独立的数据库:还是让父 model 只包含基本的公共信息,而这些信息只能由 ...
- 【转】Linux下gcc生成和使用静态库和动态库详解
一.基本概念 1.1 什么是库 在Windows平台和Linux平台下都大量存在着库. 本质上来说,库是一种可执行代码的二进制形式,可以被操作系统载入内存执行. 由于windows和linux的平台不 ...