查询功能实现
１、输入关键字直接显示查询结果
<!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 type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // 隔行变色 $('#check_table tr:odd').addClass('odd'); $('#check_table tr:even').addClass('even'); // 筛选 $("#filter").click( function(){ $("#check_table .datarow").hide().filter(":contains('ABCDEFG')").show(); } ); // 按输入筛选 $("#keyword").keyup(function(){ var txt_val = $(this).val(); if (txt_val == "") $("#check_table .datarow").show(); else $("#check_table .datarow").hide().filter(":contains('" + ($(this).val()) + "')").show(); }); }); </script> <style type="text/css"> * { margin:0;padding:0; } body { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } h2 { margin-top: 20px; } .wrap { margin: 20px; } table td, table th { border: 1px solid #333; padding: 5px 10px; } table th { background-color: #333; text-align: left; color: #FFF; } .tb1 { border-collapse: collapse; } .tb1 .odd { background-color: #79BCFF; } .tb1 .even { background-color: #D0E8FF; } </style> </head> <body> <div class="wrap"> <a id="filter" href="javascript:;" onclick="return false">查询关键字为 'ABCDEFG'</a> <div>输入关键字:<input type="text" id="keyword" /></div> <table id="check_table" class="tb1" style="width: 100%"> <tr> <th>Id</th> <th>Name</th> <th>Description</th> <th>Time</th> </tr> <tr class="datarow"> <td>1</td> <td>Fuck</td> <td>ABCDEFG</td> <td>2012-1-1</td> </tr> <tr class="datarow"> <td>2</td> <td>Shit</td> <td>HIJKLMN</td> <td>2012-2-6</td> </tr> <tr class="datarow"> <td>3</td> <td>Dick</td> <td>OPQRSTU</td> <td>2012-2-10</td> </tr> <tr class="datarow"> <td>4</td> <td>Ass</td> <td>VWXYZAB</td> <td>2012-2-15</td> </tr> <tr class="datarow"> <td>5</td> <td>Hole</td> <td>ABCDEFG</td> <td>2012-2-16</td> </tr> </table> </div> </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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> function check() { var txt_val = $("#keyword")[0].value; if (txt_val == "") $("#check_table .datarow").show(); else $("#check_table .datarow").hide().filter(":contains('" + txt_val + "')").show(); } </script> <style type="text/css"> * { margin:0;padding:0; } body { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } .wrap { margin: 20px; } table td, table th { border: 1px solid #333; padding: 5px 10px; } table th { background-color: #333; text-align: left; color: #FFF; } .tb1 { border-collapse: collapse; } </style> </head> <body> <div class="wrap"> <a id="filter" href="javascript:;" onclick="return false">查询关键字为 'ABCDEFG'</a> <div>关键字：<input type="text" id="keyword"/> <input type="button" id="keyword1" value="查询" style="color:blue;" onclick="check()"/> </div> <table id="check_table" class="tb1" style="width: 100%"> <tr> <th>Id</th> <th>Name</th> <th>Description</th> <th>Time</th> </tr> <tr class="datarow"> <td>1</td> <td>Fuck</td> <td>ABCDEFG</td> <td>2012-1-1</td> </tr> <tr class="datarow"> <td>2</td> <td>Shit</td> <td>HIJKLMN</td> <td>2012-2-6</td> </tr> <tr class="datarow"> <td>3</td> <td>Dick</td> <td>OPQRSTU</td> <td>2012-2-10</td> </tr> <tr class="datarow"> <td>4</td> <td>Ass</td> <td>VWXYZAB</td> <td>2012-2-15</td> </tr> <tr class="datarow"> <td>5</td> <td>Hole</td> <td>ABCDEFG</td> <td>2012-2-16</td> </tr> </table> </div> </body> </html>
