javascript表格常用操作表头排序表头固定列隐藏行隐藏

共8个文件

js：3个

gif：3个

png：1个

javascript

table

jquery

表头固定

页脚求和

4星 · 超过85%的资源需积分: 50 190 浏览量 2009-03-31 16:45:11 上传评论 1 收藏 27KB RAR 举报

在JavaScript和jQuery的世界里，表格（Table）是数据展示的重要工具。本教程将重点讲解如何实现"javascript表格常用操作"，包括"表头排序"、"表头固定"、"列隐藏"、"行隐藏"以及"悬浮变色"等功能。这些功能可以极大地提升用户体验，使得数据浏览和管理更加便捷。我们来谈谈"表头固定"。在长表格中，表头固定是一项非常实用的功能。当用户滚动页面时，表头始终保持在视口顶部，方便用户始终了解列标题。实现这一功能通常通过CSS和JavaScript协同完成。在CSS中，我们可以为表头设置`position: fixed`，并调整其宽度和位置，使其在滚动时保持在合适的位置。然后，使用JavaScript监听滚动事件，动态调整表头的位置。接着是"页脚求和"。在财务或者统计类应用中，页脚的求和功能很常见。我们可以遍历表格中的数值单元格，将它们的值相加，并显示在页脚的合计单元格中。使用jQuery，我们可以轻松地选择所有的`<td>`元素，使用`.map()`函数提取数值，再用`.get()`和`.reduce()`计算总和。 "行隐藏"和"列隐藏"是控制用户视图的重要手段。对于行隐藏，我们可以使用jQuery的`.hide()`方法选择特定行进行隐藏，而`.show()`方法可以将其恢复。对于列隐藏，我们同样可以操作对应的`<th>`和`<td>`元素，但需要注意的是，隐藏列可能会影响到其他列的布局，所以需要额外处理。 "悬浮变色"是指鼠标悬停在表格行或单元格上时改变背景色，以提供视觉反馈。这可以通过CSS的`:hover`伪类实现，或者使用jQuery动态添加和移除类来控制样式。 "表头排序"是许多数据表格的核心功能。实现这个功能，可以使用第三方库如DataTables，或者自己编写排序逻辑。基本思路是监听表头点击事件，获取当前列索引，然后根据数据类型（数字、字符串等）对表格数据进行升序或降序排序。如果数据存储在数组中，可以使用JavaScript的`.sort()`函数。在提供的JQUERYDEMO.html文件中，你可以看到这些功能的实际应用。IMG和JS文件夹可能包含了示例的图片和JavaScript代码，用于实现上述效果。通过查看和学习这些代码，你可以更深入地理解如何将这些功能集成到自己的项目中。 JavaScript和jQuery提供了强大的工具来增强HTML表格的功能。熟练掌握这些操作，不仅可以提高用户界面的交互性，也能使数据管理和展示变得更加高效和直观。

资源推荐

资源详情

资源评论

收起资源包目录

JQUERYDEMO.rar （8个子文件）

JQUERYDEMO.html 2KB

IMG

asc.gif 54B

bg.gif 64B

bg.png 3KB

desc.gif 54B

jquery.tablesorter.min.js 12KB

jquery.js 54KB

hqbjs.js 3KB

<html> <head> <title>三国有限公司薪资表</title> <style> *{ font-size:10pt; } body { overflow:hidden; } #tbldv{ border-left:0px #147 solid;padding:0; } table{ border:0px #147 solid;margin-top:0;padding:0;border-collapse:collapse; border-top:0px #147 solid; } td,th,tr{ margin:0;padding:6px;border:1px solid #147; } .title{ position:relative;top:expression(this.offsetParent.scrollTop);z-index:1;background:#6EC3C9;color:#fff;padding:0;margin:0; } .footer { background:#BFCAE6; } .td{ } .tdHidden{ width:0; } .trHover{ background:#C8E2B1;cursor:hand; } .header{ background:#6EC3C9 url(img\bg.gif) no-repeat;cursor:pointer;color:#000;text-align:left;padding:5px;background-position:center right; } .headerSortUp{ background-image:url(img\asc.gif); } .headerSortDown{ background-image:url(img/desc.gif); } </style> <script language="javascript" src="js/jquery.js" type="text/javascript"></script> <script language="javascript" src="js/hqbjs.js" type="text/javascript"></script> <script language="javascript" src="js/jquery.tablesorter.min.js" type="text/javascript"></script> </head> <body> <form action="#" method="post"> <div id="commandRang" style="margin-left:120px;"> <input type="button" id="btnHiddenRow" value="HiddenRow"/> <select id="hiddenRowOption"> <option value="总经理" checked>总经理</option> <option value="董事长">董事长</option> <option value="程序员">程序员</option> </select> <input type="button" id="btnHiddenCol" value="HiddenColumn"/> <select id="hiddenColumnOption"> <option value="姓名" checked>姓名</option> <option value="性别">性别</option> <option value="EMAIL">EMAIL</option> </select> <input type="button" id="btnAll" value="showAll"/> </div> <hr/> <div style="overflow:hidden;"> <div style="margin-left:120px;margin-right:50px;text-align:center;overflow:auto;width:80%;height:550px;" id="tbldv"> </div> </div> </form> </body> <html>

评论收藏

内容反馈