代码语言
.
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
/
1121
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>
试试其它关键字
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时，然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App（QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键，并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开，禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴，Chrome/Firefox下可用
.
video视频播放，play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时，然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App（QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键，并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开，禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴，Chrome/Firefox下可用
.
video视频播放，play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
贡献的其它代码
Label
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3