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>

时间： 2024-10-15 10:16:25

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

webform快速创建表单内容文件--oracle 数据库

使用方法前台页面这样写就足够了 <form class="stdform" runat="server"> <div id="field_tab_content" runat="server"></div> </form> 新增编辑加载页面(改页面需要继承CreateModel类) Type type; public decimal id = 0; protected void

UltraWebGrid 固定表头表尾

把Grid的TableLayout属性设为:Fixed ; UseFixedHeaders设为:True //这是指定Grid允许固定列 StationaryMargins="Headerandfooter" //这使Header始终在最上面显示设置 UltraWebGrid 固定表头表尾

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

今天在做入院管理的时候,需要实现表单内容以及验证信息的重置,具体效果如下: 当我再点击添加添加住院患者按钮打开表单时,应该是这个样子的: 根据Element-UI官方文档提供的方法,我们可以使用这个函数: resetForm(formName) { this.$refs[formName].resetFields(); } 实际使用的时候代码: this.visible = true; this.resetForm('form'); 先显示对话框,再重置表单,如果这两行代码顺序颠倒,点击添加住院

检测提交表单内容不能为空JS/jQuery代码（基础）

方法一: 使用css的required属性 <input type="" required="required" name="" id="" value="" /> 方法二: 使用JS代码示例,注意事项:form要加上onSubmit事件,form.xx.vlaue要在表单中对应name <script type="text/javascript"> functi

dedecms织梦调用自定义表单内容

怎么在前台页面调用dedecms自定义表单的内容呢,其实方法很简单,下面是调用表单的代码 {dede:loop table='dede_sfgame' sort='' row='5' if='' } <li>[field:ccdec/]</li> {/dede:loop} 其中table='dede_sfgame'中的dede_sfgame就是自定义表单的表名[field:ccdec/]就是中的dedec就是数据字段名sort = '' 用于排序的字段row = '' 返回结果的

用PHP Email发送表单内容（3）-根据用户的输入显示错误信息

这一节内容不多,主要由两个地方需要注意: 1.用in_array判定一个变量是否在一个数组中,这是我们判定某一个表单上会否输入或者有错的依据: 2.PHP的条件语句可以可以被<?php ?>标签分隔开来,也就是说首位在不同的标签中,中间部分依然会当做条件语句的一部分,只有判定为true的时候才会显示或者执行. 看一段代码: 1 <?php 2 $missing = array();//用于存储用户没有填写的信息: 3 $error = array();//用于存储用户填写错误的信息: 4

用PHP Email发送表单内容（10）- 发送邮件

这一节的内容是发送邮件,有以下几点需要注意: 1.mail函数的格式,各个参数的格式: 2.发送成功之后,应该给用户怎样的反馈? 3.如果没有发送成功,改给用户什么样的反馈? 主要是增加了下面这些代码: mail_process.php 1 $mailSended = mail($to ,$subject, $message, $headers, $authenticate);//这里直接换做mail函数 2 if(!$mailSended){ 3 $errors['mailfail'] = t

用PHP Email发送表单内容（7）- 如何防止非法内容的输入？

这一节主要由这些内容: 1.判断用户输入的内容是否合法?(用正则表达式,这个需要掌握): 2.如果用户输入的内容不合法,请显示相应的警告信息,并且停止之后的操作: 这里以防止email inject header为例: 首先看看完成之后的完整的代码: form.php: 1 <?php 2 $missing = array();//用于存储用户没有填写的信息: 3 $error = array();//用于存储用户填写错误的信息: 4 //具体如何识别没有填写或者填写错误的信息,然后把它们存储到