JavaScript实现的一个动态查询表格，随着文本框中资料的改变，下边Table中的资料会自动筛选。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="cache-control" content="no-cache, must-revalidate"> <mce:script type="text/javascript"><!-- //the function of trim String.prototype.trim = function(){ return this.replace(/(^/s*)|(/s*$)/g,""); } //the function of startsWith String.prototype.startsWith = function(str) {return (this.match("^"+str)==str)} function changeModel(obj) { var model = obj.value.toUpperCase(); var tbl = document.getElementById("tblResult"); var i = tbl.rows.length; var counter = 0; if (model == null || model.trim() == "") { for ( var j = 0; j < i; j++) { tbl.rows[j].style.display = "block"; counter++; } document.getElementById("lblMessage").innerText = "Total : " + counter + " rows "; return; } for ( var j = 1; j < i; j++) { if (tbl.rows[j].cells[0].innerText.startsWith(model)) { tbl.rows[j].style.display = "block"; counter++; } else { tbl.rows[j].style.display = "none"; } } document.getElementById("lblMessage").innerText = "Total : " + counter + " rows "; } // --></mce:script> </head> <body> <form action=""> <div style="width: 294px; height: 25px; overflow: auto; font-size: 8pt;">Selector : <input type="text" id="txtModel" name="txtModel" maxlength="25" size="25" onkeydown="if (event.keyCode==13) return false;" onkeyup="changeModel(this);" style="font-size: 8pt;text-transform: uppercase;"> <label id="lblMessage"></label></div> <div style="width: 294px; height: 375px; overflow: auto;"> <table id="tblResult" style="font-size: 8pt;" mce_style="font-size: 8pt;" cellpadding="0" cellspacing="0" border="1" width="100%" bordercolor="#FFFFAA"> <tr> <td>Title</td> </tr> <mce:script type="text/javascript"><!-- for(var i = 0; i < 100; i++){ document.write('<tr><td><a href="#" mce_href="#" onclick="giveValueBack(this);">'); document.write(i); document.write('</a></td></tr>'); } // --></mce:script> </table> </div> </form> </body> </html>
浙公网安备 33010602011771号