表头锁定js(基于Jquery)资源-CSDN文库

共4个文件

js：3个

html：1个

表头锁定

table

title

jquery

4星 · 超过85%的资源需积分: 9 11 浏览量 2011-03-19 11:38:52 上传评论 1 收藏 33KB RAR 举报

在网页设计中，数据展示经常使用表格（table）来组织，尤其在大数据量时，滚动浏览成为必然。然而，当用户滚动页面时，表头（title）往往随之消失，这不利于用户快速理解列数据的含义。为了解决这个问题，"表头锁定"技术应运而生，它使得表格在滚动时保持表头可见。本项目提供的是一种基于jQuery实现的"表头锁定js"，通过简单地引入js文件，就能轻松实现这个功能。 jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，使得开发者可以更高效地编写JavaScript代码。在这个"表头锁定js"中，我们将利用jQuery的DOM操作和事件监听特性来完成表头的固定。我们需要在HTML文件中引入jQuery库和这个特定的"表头锁定js"文件。例如，可以在`<head>`标签内添加以下代码： ```html <script src="https://code.jquery.com/jquery-3.x.y.min.js"></script> <script src="lockTableTitle.js"></script> ``` 接下来，我们需要对目标表格应用特定的CSS类或ID以便于js识别。例如： ```html <table id="myTable">  </table> ``` 在JS文件中，通常会有一个初始化函数，用于绑定滚动事件和执行锁定表头的逻辑。例如： ```javascript $(document).ready(function() { $('#myTable').lockTableTitle(); }); ``` `lockTableTitle()`函数是自定义的，它会监听滚动事件，当表格区域滚动时，将表头复制并固定在顶部。这个实现可能包括以下步骤： 1. **复制表头**：创建一个与原表头结构相同的副本，并设置适当的CSS样式，如`position: fixed`以使其相对于浏览器窗口固定。 2. **同步滚动**：当表格主体部分滚动时，同步更新复制的表头的位置，确保始终在可视区域内。 3. **响应式布局**：考虑到不同设备和屏幕尺寸，可能需要适配各种分辨率和视口宽度，以确保表头在任何情况下都能正确显示。在提供的压缩包中，`demo`文件夹下的`test.html`是一个测试页面，它展示了如何使用这个插件。你可以打开这个文件，查看源代码并进行实际操作，以更好地理解和应用这个表头锁定功能。 "表头锁定js (基于Jquery)"提供了一种便捷的方法，使得开发人员无需深入研究复杂的CSS和JavaScript交互，就能为表格添加实用的滚动固定表头功能。这对于提升用户体验，特别是处理大量数据的网页，是非常有价值的。通过学习和使用这种技术，我们可以让数据展示更加友好和直观。

资源推荐

资源详情

资源评论

收起资源包目录

lockTableTitle v0.4.1.rar （4个子文件）

lockTableTitle v0.4.1

lockTableTitle.js 4KB

demo

jquery.js 98KB

test.html 24KB

lockTableTitle.js 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>Insert title here</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="lockTableTitle.js"></script> <script type="text/javascript"> var locktb; $(function(){ locktb=new Kkctf.table.lockTableSingle({ tMain:$('#lockTable'), //table的层 padWidth:0, //单元格左右的padding的值总和数值 borWidth:2, //表格左右边框宽度总和值 subtHeig:60, //表格高度减去多少 dinamicDiv:$('#dynamicDiv'), //动态层的高度.表格会根据动态层的显示或隐藏进行表格大小的动态调整(可选) autoHeight:true //表格窗口是否随着窗口的高度改变自动调整高度(可选) }); }); function test(){ if($('#dynamicDiv').is(':visible')){ $('#dynamicDiv').hide(); }else{ $('#dynamicDiv').show(); } locktb.autoHeightFn(); } </script> </head> <body> <input type="button" value="显示/隐藏" onclick="test()"></input> <div style='border:1px solid ;height:100px;margin:5px;display:none' id="dynamicDiv"> </div> <div id="lockTable"> <table border="1" cellpadding="0" cellspacing="0"> <tr style="background: pink"> <td>AAAAHead</td> <td>BBBHead</td> <td>CCCCHead</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTHead</td> <td>EEEEHead</td> <td>DDDDHead</td> <td>FFFFFHead</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTE</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTT</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTET</td> <td>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</td> </tr> <tr> <td>test</td> <td>TESTTESTTESTTE</td> <td>TESTTESTTESTTESTTEST

评论收藏

内容反馈