Jquery 表格处理(过滤行，过滤列，分页)-优快云博客

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>