表格处理(过滤行，过滤列，分页)代码,Js代码库,德仔网

代码语言
代码分类
【Js】表格处理(过滤行，过滤列，分页)
作者: / 发布于2016-4-26/ 375
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>
评论列表
本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
同语言下
可能有用的
贡献的其它代码Label