A dynamic query table implemented by JavaScript. As the data in the text box changes, the data in the following table is automatically filtered.
<% @ Page Language = "Java" contenttype = "text/html; charset = UTF-8" <br/> pageencoding = "UTF-8" %> <br/> <! Doctype <br/> <HTML> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <meta http-equiv =" cache-control "content =" no-cache, must-revalidate "> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> // the function of trim <br/> string. prototype. trim = function () {<br/> return this. replace (/(^/S *) | (/S * $)/g ,""); <br/>}< br/> // the function of startswith <br/> string. prototype. startswith = function (STR) <br/> {return (this. match ("^" + Str) = Str)} </P> <p> function changemodel (OBJ) {<br/> VAR model = obj. value. touppercase (); <br/> var TBL = document. getelementbyid ("tblresult"); <br/> var I = TBL. rows. Length; <br/> var counter = 0; <br/> If (model = NULL | model. trim () = "") {<br/> for (var j = 0; j <I; j ++) {<br/> TBL. rows [J]. style. display = "Block"; <br/> counter ++; <br/>}< br/> document. getelementbyid ("lblmessage "). innertext = "Total:" <br/> + counter + "rows"; <br/> return; <br/>}< br/> for (VAR j = 1; j <I; j ++) {<br/> If (TBL. rows [J]. cells [0]. innertext. startswith (model) {<br/> TBL. R Ows [J]. style. display = "Block"; <br/> counter ++; <br/>}else {<br/> TBL. rows [J]. style. display = "NONE"; <br/>}< br/> document. getelementbyid ("lblmessage "). innertext = "Total:" + counter <br/> + "rows"; <br/>}< br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <form action = ""> <br/> <Div style = "width: 294px; Height: 25px; overflow: auto; font-size: 8pt; "> selector: <input <br/> type =" Text "Id =" txtmodel "name =" txtmodel "maxlength =" 25 "size =" 25 "<br/> onkeydown =" If (event. keycode = 13) return false; "onkeyup =" changemodel (this); "<br/> style =" font-size: 8pt; text-transform: uppercase; "> <br/> <label id =" lblmessage "> </label> </div> <br/> <Div style =" width: 294px; Height: 375px; overflow: auto; "> <br/> <Table id =" tblresult "style =" font-size: 8pt; "mce_style =" font-size: 8pt; "cellpadding =" 0 "<br /> Cellspacing = "0" border = "1" width = "100%" bordercolor = "# ffffaa"> <br/> <tr> <br/> <TD> title </TD> <br/> </tr> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> for (VAR I = 0; I <100; I ++) {<br/> document. write ('<tr> <TD> <a href = "#" mce_href = "#" onclick = "givevalueback (this);">'); <br/> document. write (I); <br/> document. write ('</a> </TD> </tr>'); <br/>}</P> <p> // --> </MCE: SCRIPT> <br/> </table> <br/> </div> <br/> </form> <br/> </body> <br/> </ HTML>