资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
发一个数据过滤的代码,很简单,有用的着的拿去
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0058)http://www.barelyfitz.com/projects/filterlist/example.html --> <HTML><HEAD><TITLE>Filterlist Example</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0A%20%20%20%20%2F*%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D*%20%0D%0A%20%24Id%3A%20filterlist.js%2Cv%201.3%202003%2F10%2F08%2017%3A13%3A49%20pat%20Exp%20%24%20%0D%0A%20Copyright%202003%20Patrick%20Fitzgerald%20%0D%0A%20http%3A%2F%2Fwww.barelyfitz.com%2Fwebdesign%2Farticles%2Ffilterlist%2F%20%0D%0A%0D%0A%20This%20program%20is%20free%20software%3B%20you%20can%20redistribute%20it%20and%2For%20modify%20%0D%0A%20it%20under%20the%20terms%20of%20the%20GNU%20General%20Public%20License%20as%20published%20by%20%0D%0A%20the%20Free%20Software%20Foundation%3B%20either%20version%202%20of%20the%20License%2C%20or%20%0D%0A%20(at%20your%20option)%20any%20later%20version.%20%0D%0A%0D%0A%20This%20program%20is%20distributed%20in%20the%20hope%20that%20it%20will%20be%20useful%2C%20%0D%0A%20but%20WITHOUT%20ANY%20WARRANTY%3B%20without%20even%20the%20implied%20warranty%20of%20%0D%0A%20MERCHANTABILITY%20or%20FITNESS%20FOR%20A%20PARTICULAR%20PURPOSE.%20%20See%20the%20%0D%0A%20GNU%20General%20Public%20License%20for%20more%20details.%20%0D%0A%0D%0A%20You%20should%20have%20received%20a%20copy%20of%20the%20GNU%20General%20Public%20License%20%0D%0A%20along%20with%20this%20program%3B%20if%20not%2C%20write%20to%20the%20Free%20Software%20%0D%0A%20Foundation%2C%20Inc.%2C%2059%20Temple%20Place%2C%20Suite%20330%2C%20Boston%2C%20MA%20%3F-1307%20%20USA%20%0D%0A%20*%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D*%2F%20%0D%0A%0D%0Afunction%20filterlist(selectobj)%20%7B%20%0D%0A%0D%0A%20%20%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0A%20%20%2F%2F%20PARAMETERS%20%0D%0A%20%20%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0A%0D%0A%20%20%2F%2F%20HTML%20SELECT%20object%20%0D%0A%20%20%2F%2F%20For%20example%2C%20set%20this%20to%20document.myform.myselect%20%0D%0A%20%20this.selectobj%20%3D%20selectobj%3B%20%0D%0A%0D%0A%20%20%2F%2F%20Flags%20for%20regexp%20matching.%20%0D%0A%20%20%2F%2F%20%22i%22%20%3D%20ignore%20case%3B%20%22%22%20%3D%20do%20not%20ignore%20case%20%0D%0A%20%20%2F%2F%20You%20can%20use%20the%20set_ignore_case()%20method%20to%20set%20this%20%0D%0A%20%20this.flags%20%3D%20'i'%3B%20%0D%0A%0D%0A%20%20%2F%2F%20Which%20parts%20of%20the%20select%20list%20do%20you%20want%20to%20match%3F%20%0D%0A%20%20this.match_text%20%3D%20true%3B%20%0D%0A%20%20this.match_value%20%3D%20false%3B%20%0D%0A%0D%0A%20%20%2F%2F%20You%20can%20set%20the%20hook%20variable%20to%20a%20function%20that%20%0D%0A%20%20%2F%2F%20is%20called%20whenever%20the%20select%20list%20is%20filtered.%20%0D%0A%20%20%2F%2F%20For%20example%3A%20%0D%0A%20%20%2F%2F%20this.hook%20%3D%20function()%20%7B%20%2F%2Falert()%7D%20%0D%0A%0D%0A%20%20%2F%2F%20Flag%20for%20debug%20alerts%20%0D%0A%20%20%2F%2F%20Set%20to%20true%20if%20you%20are%20having%20problems.%20%0D%0A%20%20this.show_debug%20%3D%20false%3B%20%0D%0A%0D%0A%20%20%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0A%20%20%2F%2F%20METHODS%20%0D%0A%20%20%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0A%0D%0A%20%20%2F%2F--------------------------------------------------%20%0D%0A%20%20this.init%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20%2F%2F%20This%20method%20initilizes%20the%20object.%20%0D%0A%20%20%20%20%2F%2F%20This%20method%20is%20called%20automatically%20when%20you%20create%20the%20object.%20%0D%0A%20%20%20%20%2F%2F%20You%20should%20call%20this%20again%20if%20you%20alter%20the%20selectobj%20parameter.%20%0D%0A%0D%0A%20%20%20%20if%20(!this.selectobj)%20return%20this.debug('selectobj%20not%20defined')%3B%20%0D%0A%20%20%20%20if%20(!this.selectobj.options)%20return%20this.debug('selectobj.options%20not%20defined')%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%20Make%20a%20copy%20of%20the%20select%20list%20options%20array%20%0D%0A%20%20%20%20this.optionscopy%20%3D%20new%20Array()%3B%20%0D%0A%20%20%20%20if%20(this.selectobj%20%26%26%20this.selectobj.options)%20%7B%20%0D%0A%20%20%20%20%20%20for%20(var%20i%3D0%3B%20i%20%3C%20this.selectobj.options.length%3B%20i%2B%2B)%20%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20Create%20a%20new%20Option%20%0D%0A%20%20%20%20%20%20%20%20this.optionscopy%5Bi%5D%20%3D%20new%20Option()%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20Set%20the%20text%20for%20the%20Option%20%0D%0A%20%20%20%20%20%20%20%20this.optionscopy%5Bi%5D.text%20%3D%20selectobj.options%5Bi%5D.text%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20Set%20the%20value%20for%20the%20Option.%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20If%20the%20value%20wasn't%20set%20in%20the%20original%20select%20list%2C%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20then%20use%20the%20text.%20%0D%0A%20%20%20%20%20%20%20%20if%20(selectobj.options%5Bi%5D.value)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20this.optionscopy%5Bi%5D.value%20%3D%20selectobj.options%5Bi%5D.value%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20this.optionscopy%5Bi%5D.value%20%3D%20selectobj.options%5Bi%5D.text%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%0D%0A%20%20%2F%2F--------------------------------------------------%20%0D%0A%20%20this.reset%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20%2F%2F%20This%20method%20resets%20the%20select%20list%20to%20the%20original%20state.%20%0D%0A%20%20%20%20%2F%2F%20It%20also%20unselects%20all%20of%20the%20options.%20%0D%0A%0D%0A%20%20%20%20this.set('')%3B%20%0D%0A%20%20%7D%20%0D%0A%0D%0A%0D%0A%20%20%2F%2F--------------------------------------------------%20%0D%0A%20%20this.set%20%3D%20function(pattern)%20%7B%20%0D%0A%20%20%20%20%2F%2F%20This%20method%20removes%20all%20of%20the%20options%20from%20the%20select%20list%2C%20%0D%0A%20%20%20%20%2F%2F%20then%20adds%20only%20the%20options%20that%20match%20the%20pattern%20regexp.%20%0D%0A%20%20%20%20%2F%2F%20It%20also%20unselects%20all%20of%20the%20options.%20%0D%0A%0D%0A%20%20%20%20var%20loop%3D0%2C%20index%3D0%2C%20regexp%2C%20e%3B%20%0D%0A%0D%0A%20%20%20%20if%20(!this.selectobj)%20return%20this.debug('selectobj%20not%20defined')%3B%20%0D%0A%20%20%20%20if%20(!this.selectobj.options)%20return%20this.debug('selectobj.options%20not%20defined')%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%20Clear%20the%20select%20list%20so%20nothing%20is%20displayed%20%0D%0A%20%20%20%20this.selectobj.options.length%20%3D%200%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%20Set%20up%20the%20regular%20expression.%20%0D%0A%20%20%20%20%2F%2F%20If%20there%20is%20an%20error%20in%20the%20regexp%2C%20%0D%0A%20%20%20%20%2F%2F%20then%20return%20without%20selecting%20any%20items.%20%0D%0A%20%20%20%20try%20%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%2F%2F%20Initialize%20the%20regexp%20%0D%0A%20%20%20%20%20%20regexp%20%3D%20new%20RegExp(pattern%2C%20this.flags)%3B%20%0D%0A%0D%0A%20%20%20%20%7D%20catch(e)%20%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%2F%2F%20There%20was%20an%20error%20creating%20the%20regexp.%20%0D%0A%0D%0A%20%20%20%20%20%20%2F%2F%20If%20the%20user%20specified%20a%20function%20hook%2C%20%0D%0A%20%20%20%20%20%20%2F%2F%20call%20it%20now%2C%20then%20return%20%0D%0A%20%20%20%20%20%20if%20(typeof%20this.hook%20%3D%3D%20'function')%20%7B%20%0D%0A%20%20%20%20%20%20%20%20this.hook()%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20return%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%2F%2F%20Loop%20through%20the%20entire%20select%20list%20and%20%0D%0A%20%20%20%20%2F%2F%20add%20the%20matching%20items%20to%20the%20select%20list%20%0D%0A%20%20%20%20for%20(loop%3D0%3B%20loop%20%3C%20this.optionscopy.length%3B%20loop%2B%2B)%20%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%2F%2F%20This%20is%20the%20option%20that%20we're%20currently%20testing%20%0D%0A%20%20%20%20%20%20var%20option%20%3D%20this.optionscopy%5Bloop%5D%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%2F%2F%20Check%20if%20we%20have%20a%20match%20%0D%0A%20%20%20%20%20%20if%20((this.match_text%20%26%26%20regexp.test(option.text))%20%7C%7C%20%0D%0A%20%20%20%20%20%20%20%20%20%20(this.match_value%20%26%26%20regexp.test(option.value)))%20%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20We%20have%20a%20match%2C%20so%20add%20this%20option%20to%20the%20select%20list%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20and%20increment%20the%20index%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20this.selectobj.options%5Bindex%2B%2B%5D%20%3D%20%0D%0A%20%20%20%20%20%20%20%20%20%20new%20Option(option.text%2C%20option.value%2C%20false)%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%2F%2F%20If%20the%20user%20specified%20a%20function%20hook%2C%20%0D%0A%20%20%20%20%2F%2F%20call%20it%20now%20%0D%0A%20%20%20%20if%20(typeof%20this.hook%20%3D%3D%20'function')%20%7B%20%0D%0A%20%20%20%20%20%20this.hook()%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%7D%20%0D%0A%0D%0A%0D%0A%20%20%2F%2F--------------------------------------------------%20%0D%0A%20%20this.set_ignore_case%20%3D%20function(value)%20%7B%20%0D%0A%20%20%20%20%2F%2F%20This%20method%20sets%20the%20regexp%20flags.%20%0D%0A%20%20%20%20%2F%2F%20If%20value%20is%20true%2C%20sets%20the%20flags%20to%20%22i%22.%20%0D%0A%20%20%20%20%2F%2F%20If%20value%20is%20false%2C%20sets%20the%20flags%20to%20%22%22.%20%0D%0A%0D%0A%20%20%20%20if%20(value)%20%7B%20%0D%0A%20%20%20%20%20%20this.flags%20%3D%20'i'%3B%20%0D%0A%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20this.flags%20%3D%20''%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%0D%0A%0D%0A%20%20%2F%2F--------------------------------------------------%20%0D%0A%20%20this.debug%20%3D%20function(msg)%20%7B%20%0D%0A%20%20%20%20if%20(this.show_debug)%20%7B%20%0D%0A%20%20%20%20%20%20alert('FilterList%3A%20'%20%2B%20msg)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%0D%0A%0D%0A%20%20%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0A%20%20%2F%2F%20Initialize%20the%20object%20%0D%0A%20%20%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0A%20%20this.init()%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> <META content="MSHTML 6.00.2900.3020" name=GENERATOR></HEAD> <BODY> <H1>Filterlist Example</H1> <FORM name=myform action=""><SELECT size=5 name=myselect> <OPTION>Keanu Reeves<OPTION>Laurence Fishburne<OPTION>Monica Bellucci<OPTION>Daniel Bernhardt<OPTION>Nona Gaye<OPTION>Lachy Hulme<OPTION>Nathaniel Lees<OPTION>Harry J. Lennix<OPTION>Matt McColm<OPTION>Carrie-Anne Moss<OPTION>Collin Chou<OPTION>Genevieve O'Reilly<OPTION>Harold Perrineau Jr.<OPTION>Jada Pinkett Smith<OPTION>Adrian Rayment<OPTION>Neil Rayment<OPTION>Bruce Spence<OPTION>Hugo Weaving<OPTION>Lambert Wilson<OPTION>Anthony Wong</OPTION></SELECT> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20type%3Dtext%2Fjavascript%3E%20%0D%0A%3C!--%20%0D%0Avar%20myfilter%20%3D%20new%20filterlist(document.myform.myselect)%3B%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2FSCRIPT%3E"> <P>Filter: <A title="Clear the filter" href="javascript:myfilter.reset()" _ewebeditor_ta_href="javascript%3Amyfilter.reset()">Clear</A> <A title="Show items starting with A" href="javascript:myfilter.set('^A')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EA')">A</A> <A title="Show items starting with B" href="javascript:myfilter.set('^B')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EB')">B</A> <A title="Show items starting with C" href="javascript:myfilter.set('^C')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EC')">C</A> <A title="Show items starting with D" href="javascript:myfilter.set('^D')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5ED')">D</A> <A title="Show items starting with E" href="javascript:myfilter.set('^E')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EE')">E</A> <A title="Show items starting with F" href="javascript:myfilter.set('^F')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EF')">F</A> <A title="Show items starting with G" href="javascript:myfilter.set('^G')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EG')">G</A> <A title="Show items starting with H" href="javascript:myfilter.set('^H')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EH')">H</A> <A title="Show items starting with I" href="javascript:myfilter.set('^I')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EI')">I</A> <A title="Show items starting with J" href="javascript:myfilter.set('^J')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EJ')">J</A> <A title="Show items starting with K" href="javascript:myfilter.set('^K')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EK')">K</A> <A title="Show items starting with L" href="javascript:myfilter.set('^L')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EL')">L</A> <A title="Show items starting with M" href="javascript:myfilter.set('^M')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EM')">M</A> <A title="Show items starting with N" href="javascript:myfilter.set('^N')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EN')">N</A> <A title="Show items starting with O" href="javascript:myfilter.set('^O')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EO')">O</A> <A title="Show items starting with P" href="javascript:myfilter.set('^P')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EP')">P</A> <A title="Show items starting with Q" href="javascript:myfilter.set('^Q')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EQ')">Q</A> <A title="Show items starting with R" href="javascript:myfilter.set('^R')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5ER')">R</A> <A title="Show items starting with S" href="javascript:myfilter.set('^S')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5ES')">S</A> <A title="Show items starting with T" href="javascript:myfilter.set('^T')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5ET')">T</A> <A title="Show items starting with U" href="javascript:myfilter.set('^U')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EU')">U</A> <A title="Show items starting with V" href="javascript:myfilter.set('^V')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EV')">V</A> <A title="Show items starting with W" href="javascript:myfilter.set('^W')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EW')">W</A> <A title="Show items starting with X" href="javascript:myfilter.set('^X')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EX')">X</A> <A title="Show items starting with Y" href="javascript:myfilter.set('^Y')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EY')">Y</A> <A title="Show items starting with Z" href="javascript:myfilter.set('^Z')" _ewebeditor_ta_href="javascript%3Amyfilter.set('%5EZ')">Z</A> <P><!-- Note: if you have a very large select list, you should deactivate the real-time filtering on the INPUT field below - remove the onKeyUp attribute. -->Filter by regular expression: <INPUT onkeyup=myfilter.set(this.value) name=regexp> <INPUT onclick=myfilter.set(this.form.regexp.value) type=button value=Filter> <INPUT onclick="myfilter.reset();this.form.regexp.value=''" type=button value=Clear> <INPUT onclick=myfilter.set_ignore_case(!this.checked) type=checkbox name=toLowerCase> Case-sensitive </FORM></P></BODY></HTML>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程