当前位置： 代码迷 >> Web前端 >> table报表内容过滤
  详细解决方案

table报表内容过滤

热度：391   发布时间：2012-11-20 09:55:43.0
table表格内容过滤
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery.js" type="text/javascript"></script>
<style type="text/css">
	<!--
	table{border-collapse:collapse;width:100%;}
	table th,table td{padding:5px 10px;border:2px #fff solid;}
	table thead{background-color:#abd3a5;color:#fff;}
	table tbody tr.odd{background-color:#ecf9de;}
	table tbody tr.even{background-color:#e1f1d8;}
	table tbody td.sorted{background-color:#f8f6d0;}
	table thead tr th{cursor:pointer;line-height:12px;}
	table thead tr th.sorted-desc{background:#abd3a5 url("images/icon.gif") no-repeat 98% 7px;}
	table thead tr th.sorted-asc{background:#abd3a5 url("images/icon.gif") no-repeat 98% -13px;}
	table thead tr th.hover{text-decoration:underline;}
	.page{padding:10px 0;border-bottom:1px dashed #abd3a5;margin-bottom:10px;font-size:12px;}
	.page .page-number{padding:1px 5px;margin-right:5px;cursor:pointer;}
	.page .active{background-color:#abd3a5;color:#fff;}
	-->
</style>
<title>无标题文档</title>
<script>
/*
 *对jQuery本身提供的方法进行扩展,table隔行变色
 */
jQuery.fn.alternateRowColors = function(){  
     $("tbody tr:odd",this).removeClass("even").addClass("odd");  
     $("tbody tr:even",this).removeClass("odd").addClass("even");  
     return this;  
} 

$(function(){
       $("#filterName").keyup(function(){
	      $("table tbody tr")
					.hide()
					.filter(":contains('"+( $(this).val() )+"')")
					.show();
	   }).keyup();
  })

</script>
</head>
<body>
<div>
<br>
筛选：
<input id="filterName">
<br>
</div>
<div class="page"></div><table>
<thead>
  <tr>
    <th>代码</th>
    <th class="sort-alpha">名称</th>
    <th>最新价</th>
    <th>昨收</th>
    <th>今开</th>
    <th>最高</th>
    <th>最低</th>
    <th>成交量</th>
    <th>成交额</th>
  </tr>
</thead>
<tbody>
<tr><td>600448</td><td>华纺股份</td><td>6.50</td><td>6.86</td><td>6.80</td><td>6.85</td><td>6.48</td><td>138423.59</td><td>91175983</td></tr><tr><td>601199</td><td>江南水务</td><td>19.44</td><td>20.55</td><td>19.81</td><td>19.97</td><td>19.31</td><td>160913.39</td><td>315438065</td></tr><tr><td>000062</td><td>深圳华强</td><td>10.02</td><td>10.70</td><td>10.65</td><td>10.92</td><td>9.73</td><td>147069.71</td><td>150852675</td></tr><tr><td>002053</td><td>云南盐化</td><td>13.96</td><td>15.10</td><td>14.69</td><td>14.69</td><td>13.79</td><td>200278.07</td><td>286209506</td></tr><tr><td>600297</td><td>美罗药业</td><td>13.02</td><td>14.14</td><td>14.00</td><td>14.14</td><td>12.91</td><td>424816.97</td><td>561932275</td></tr><tr><td>300037</td><td>新宙邦</td><td>42.22</td><td>45.91</td><td>43.50</td><td>43.96</td><td>42.12</td><td>33646.93</td><td>144934590</td></tr><tr><td>000822</td><td>山东海化</td><td>9.25</td><td>10.08</td><td>9.86</td><td>9.98</td><td>9.15</td><td>548488.98</td><td>519705432</td></tr><tr><td>000737</td><td>南风化工</td><td>7.39</td><td>8.09</td><td>7.75</td><td>7.78</td><td>7.30</td><td>487002.5</td><td>366021802</td></tr><tr><td>600328</td><td>兰太实业</td><td>15.70</td><td>17.44</td><td>15.82</td><td>16.69</td><td>15.70</td><td>606256.45</td><td>966111068</td></tr></tbody>
</body>
 
</table>
</html>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.