Jquery 表格处理(过滤行，过滤列，分页)

最新推荐文章于 2020-08-15 13:48:18 发布

ws_hgo

最新推荐文章于 2020-08-15 13:48:18 发布

阅读量4.9k

点赞数 1

分类专栏： JQuery 文章标签： jquery function xhtml table border html

本文链接：https://blog.csdn.net/ws_hgo/article/details/6642926

版权

JQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>