网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Js
】
表格处理(过滤行,过滤列,分页)
作者:
/ 发布于
2016-4-26
/
404
1.在鼠标悬停时突出显示一行 <!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> <title></title> <style type="text/css"> .hover { color:#fff; background-color:#f00; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('tr').hover(function () { $(this).find('td').addClass('hover'); }, function () { $(this).find('td').removeClass('hover'); } ) }); </script> </head> <body> <table border="1"> <thead> <tr> <th>ID</th><th>Name</th><th>Mark</th> </tr> <tr><td>100</td><td>Steven</td><td>100</td></tr> <tr><td>101</td><td>Mike</td><td>70</td></tr> <tr><td>102</td><td>Robot</td><td>80</td></tr> </thead> </table> </body> </html> 2.过滤行 <!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> <title></title> <style type="text/css"> .hover { color:#fff; background-color:#f00; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('table tr').hover(function () { $(this).find('td').addClass('hover'); }, function () { $(this).find('td').removeClass('hover'); }); $('table tr').click(function () { $(this).find('td').hide(); }) }); </script> </head> <body> <table border="1"> <thead> <tr> <th>ID</th><th>Name</th><th>Mark</th> </tr> <tr><td>100</td><td>Steven</td><td>100</td></tr> <tr><td>101</td><td>Mike</td><td>70</td></tr> <tr><td>102</td><td>Robot</td><td>80</td></tr> </thead> </table> </body> </html> 3.隐藏选定列 <!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> <title></title> <style type="text/css"> .hover { color:#fff; background-color:#f00; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('th').hover(function () { var $index = $(this).index(); $(this).addClass('hover'); $('td:nth-child(' + ($index + 1) + ')').addClass('hover'); }, function () { $('table tr').children().removeClass('hover'); } ); $('th').click(function () { var $index = $(this).index(); $('table th:not(:nth-child(' + ($index + 1) + '))').hide(); $('table td:not(:nth-child(' + ($index + 1) + '))').hide(); }) }); </script> </head> <body> <table border="1"> <thead> <tr> <th>ID</th><th>Name</th><th>Mark</th> </tr> <tr><td>100</td><td>Steven</td><td>100</td></tr> <tr><td>101</td><td>Mike</td><td>70</td></tr> <tr><td>102</td><td>Robot</td><td>80</td></tr> </thead> </table> </body> </html> 4.分页 <!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> <title></title> <style type="text/css"> .page { margin:5px; } .hover { background-color:#00f; color:#fff; cursor:hand; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var $rows = $('table tbody tr').length; var $pagesize = 2; var $pagecount = Math.ceil($rows / $pagesize); var $div = $('<div id="pages"></div>'); for (var i = 0; i < $pagecount; i++) { $('<span class="page">' + (i + 1) + '</span>').appendTo($div); } $div.appendTo('table'); $('.page').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); $('table tbody tr').hide(); var tr = $('table tbody tr'); for (var i = 0; i < $pagecount - 1; i++) { $(tr[i]).show(); } $('span').click(function () { $('table tbody tr').hide(); for (i = ($(this).text() - 1) * $pagesize; i <= $(this).text() * $pagesize - 1; i++) { $(tr[i]).show(); } }) }); </script> </head> <body> <table border="1" width="200px"> <thead> <tr> <th>ID</th><th>Name</th><th>Mark</th> </tr> </thead> <tbody> <tr><td>100</td><td>Steven</td><td>100</td></tr> <tr><td>101</td><td>Mike</td><td>70</td></tr> <tr><td>102</td><td>Robot</td><td>80</td></tr> <tr><td>103</td><td>Perry</td><td>100</td></tr> <tr><td>104</td><td>Lion</td><td>90</td></tr> <tr><td>105</td><td>Andy</td><td>85</td></tr> </tbody> </table> </body> </html>
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
同语言下
.
获取浏览器滚动条宽度
.
利用Cookie保存数据,在浏览器页面显示用户上次访问时
.
支付密码设置和登录密码设置
.
移动端图片压缩上传解决方案
.
HTML5 input file 图片上传,压缩,上传,预览
.
移动端根据百度地图api获取详细地址
.
iframe自适应高度
.
table给tbody设置滚动条
.
微信公众号去除分享菜单
.
判断字符串是否json格式
可能有用的
.
获取浏览器滚动条宽度
.
利用Cookie保存数据,在浏览器页面显示用户上次访问时
.
支付密码设置和登录密码设置
.
移动端图片压缩上传解决方案
.
HTML5 input file 图片上传,压缩,上传,预览
.
移动端根据百度地图api获取详细地址
.
iframe自适应高度
.
table给tbody设置滚动条
.
微信公众号去除分享菜单
.
判断字符串是否json格式
贡献的其它代码
Label
地图
本站
我们
服务
版权
联系
回馈
博客