jQuery带滚动条头部固定表格代码.zip_jQuery表格冻结表头插件下载资源-CSDN下载

共292个文件

css：149个

png：119个

gif：18个

版权申诉

javascript

jQuery

htm5

86 浏览量 2022-11-20 22:07:28 上传评论收藏 488KB ZIP 举报

在前端开发中，创建带有滚动条且头部固定的表格是一个常见的需求，特别是在数据量较大、需要横向或纵向滚动查看时。这个“jQuery带滚动条头部固定表格代码”压缩包提供了实现这一功能的解决方案，主要涉及的技术栈包括HTML、CSS、JavaScript以及jQuery。下面将详细介绍这些知识点。 1. **HTML**： HTML（HyperText Markup Language）是网页的基础结构语言。在这个场景中，HTML用于构建表格的基本框架。`<table>`元素用于创建表格，`<thead>`定义表头，`<tbody>`包含表格主体的数据，而`<tr>`表示行，`<th>`定义表头单元格，`<td>`定义普通数据单元格。 2. **CSS**： CSS（Cascading Style Sheets）用于控制网页的样式。在固定头部的表格中，CSS主要用于设置表格样式，比如边框、填充、字体、颜色等。同时，通过定位（positioning）和相对/绝对定位（relative/absolute positioning），可以实现头部的固定效果。当表格内容区域滚动时，头部始终保持在屏幕顶部。 3. **JavaScript**： JavaScript是一种动态脚本语言，用于增加网页的交互性。在这个例子中，JavaScript可能用于监听滚动事件（scroll event），当用户滚动页面时，通过计算滚动位置来调整表格头部的位置，保持其始终可见。 4. **jQuery**： jQuery是一个流行的JavaScript库，简化了DOM操作、事件处理、动画和Ajax交互。在这个案例中，jQuery可能用于更方便地绑定滚动事件、获取和设置DOM元素的属性，以及实现平滑的动画效果。例如，使用`$(window).scroll()`来监听滚动事件，`$('thead').position()`获取表头的当前位置，`$('thead').css('position', 'fixed')`设置表头为固定定位。 5. **HTML5**： HTML5是HTML的最新版本，引入了许多新特性，如新的元素（如`<header>`、`<footer>`、`<section>`等）、离线存储、拖放功能、媒体元素等。在这个场景中，虽然不直接与头部固定功能相关，但使用HTML5可以提高代码的可读性和现代浏览器的兼容性。通过结合这些技术，开发者可以创建出一个用户体验良好的、带滚动条且头部固定的表格，使得用户在浏览大量数据时，依然能清晰地看到列标题，提升数据的可读性。这个代码示例对于前端开发者来说是一份宝贵的参考资料，可以帮助他们快速实现类似功能。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery带滚动条头部固定表格代码.zip （292个子文件）

easyui.css 51KB

easyui.css 50KB

easyui.css 47KB

tabs.css 8KB

tabs.css 6KB

datagrid.css 5KB

linkbutton.css 4KB

color.css 4KB

calendar.css 4KB

tree.css 3KB

icon.css 3KB

panel.css 3KB

panel.css 2KB

base.css 2KB

window.css 2KB

menu.css 2KB

tooltip.css 2KB

menubutton.css 2KB

searchbox.css 2KB

textbox.css 2KB

window.css 2KB

layout.css 2KB

slider.css 2KB

spinner.css 1KB

pagination.css 1KB

style.css 1KB

combo.css 1KB

accordion.css 838B

accordion.css 835B

accordion.css 829B

messager.css 804B

共 292 条

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>jQuery带滚动条头部固定表格代码 - 网页模板</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <link rel="stylesheet" type="text/css" href="thirdParty/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="thirdParty/easyui/themes/icon.css"> <link rel="stylesheet" href="css/base.css"/> <link rel="stylesheet" href="css/style.css"/> <script src="thirdParty/jquery/jquery-1.9.1.min.js"></script> <script src="thirdParty/easyui/jquery.easyui.min.js"></script> <script src="thirdParty/easyui/easyui-lang-zh_CN.js"></script> </head> <body class="full-page"> <div class="queryBox">  <div class="queryList"> <table class="easyui-datagrid" cellspacing="0" cellpadding="0" width="100%" height="260" data-options=" singleSelect: true, collapsible: true, fitColumns: true, url: '', method: 'get', onLoadSuccess: function(){ $(this).datagrid('freezeRow'); }"> <thead data-options="frozen:true"> <tr> <th data-options="frozen:true,field:'operate'">操作</th> <th data-options="frozen:true,field:'name'">姓名</th> <th data-options="frozen:true,field:'sex'">性别</th> <th data-options="frozen:true,field:'birth'">出生日期</th> </tr> </thead> <thead> <tr class="listTit tabTh"> <th data-options="frozen:true,field:'file'">证件类型</th> <th data-options="frozen:true,field:'number'">证件号码</th> <th data-options="frozen:true,field:'tel'">固定电话</th> <th data-options="frozen:true,field:'mobile'">手机号码</th> <th data-options="frozen:true,field:'people'">联系人电话</th> <th data-options="frozen:true,field:'date'">预约日期</th> <th data-options="frozen:true,field:'sftx'">随访提醒</th> <th data-options="frozen:true,field:'way'">随访方式</th> <th data-options="frozen:true,field:'mcdate'">末次随访日期</th> <th data-options="frozen:true,field:'mociblood'">末次随访血糖</th> <th data-options="frozen:true,field:'manager'">业务管理机构</th> <th data-options="frozen:true,field:'bgdate'">报告日期</th> <th data-options="frozen:true,field:'bgdw'">报告单位</th> <th data-options="frozen:true,field:'bgdoctor'">报告医生</th> <th data-options="frozen:true,field:'bgaddress'">报告地址</th> </tr> </thead> <tbody id="content" class="easyui-panel" style="height:200px" data-options="href:''"> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a><a href="" class="lookBtn">编辑</a><a href="" class="lookBtn">编辑</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号身份证号身份证号身份证号身份证号身份证号身份证号身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市</td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="listTr"> <td><a href="tnb.html" class="lookBtn">查看</a></td> <td>张XX</td> <td>男</td> <td>1965-12-20</td> <td>身份证号</td> <td>310110199001010123</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉