查询绑定数据岛的表格中的文本并修改显示方式的js代码

复制代码代码如下: <script language="JavaScript"> function findAll(s){ if(s.length==0){ alert("请输入查询关键字"); } s=encode(s); var TDs=document.all.DataT1.all.tags("TD"); var num=0; for(var i=0;i<TDs.length;i++){ var tdObj=TDs[i]; var obj=tdObj.childNodes[0]; if(!obj.className || obj.className!="highlight"){ var t=obj.innerHTML.replace(/<spans+class=.?highlight.?>([^<>]*)</span>/gi,"$1"); obj.innerHTML=t; var cnt=loopSearch(s,obj); t=obj.innerHTML; var r=/{searchHL}(({(?!/searchHL})|[^{])*){/searchHL}/g; t=t.replace(r,"<span class='highlight'>$1</span>"); obj.innerHTML=t; num=num+cnt; } } alert("查找到关键字"+num+"处"); } function encode(s){ return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\.*[]()$^])/g,"\$1"); } function decode(s){ return s.replace(/\([\.*[]()$^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&"); } function loopSearch(s,obj){ var cnt=0; if(obj.nodeType==3){ cnt=replace(s,obj); return cnt; } for(var i=0,c;c=obj.childNodes[i];i++){ if(!c.className || c.className!="highlight") cnt+=loopSearch(s,c); } return cnt; } function replace(s,dest){ var r=new RegExp(s,"gi"); var tm=null; var t=dest.nodeValue; var cnt=0; var arr=new Array(); var a=""; var b=""; if(tm=t.match(r)){ cnt=tm.length; a=tm.toString(); arr=a.split(","); for(var i=0;i<arr.length;i++) b="{searchHL}"+arr[i]+"{/searchHL}"; t=t.replace(r,b); dest.nodeValue=t; } return cnt; } </script> <style type="text/css"> .highlight{background:blue;font-weigh:bold;color:black;} </style> 以上方法需要注意的有两点:1,在findAll 中obj取到最小单位,否则的话替换会出乱,我在实践中体会这一点主要是和数据岛绑定有关,一般的文本是不需要这么小心的.2,replace方法将tm拆分成数组,也和表格有关,一般的文本不需要拆分如果是一般的文本可以如下写复制代码代码如下: <script language="JavaScript"> function findAll(s){ if (s.length==0){ alert('搜索关键词未填写！'); return false; } s=encode(s); var obj=document.getElementsByTagName("body")[0]; var t=obj.innerHTML.replace(/<spans+class=.?highlight.?>([^<>]*)</span>/gi,"$1"); obj.innerHTML=t; var cnt=loopSearch(s,obj); t=obj.innerHTML var r=/{searchHL}(({(?!/searchHL})|[^{])*){/searchHL}/g t=t.replace(r,"<span class='highlight'>$1</span>"); obj.innerHTML=t; alert("搜索到关键词"+cnt+"处") } function replace(s,dest){ var r=new RegExp(s,"g"); var tm=null; var t=dest.nodeValue; var cnt=0; if (tm=t.match(r)){ cnt=tm.length; t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}") dest.nodeValue=t; } return cnt; } </script> html部分复制代码代码如下: <XML ID="DataBinding1" SRC="datasource.xml"></XML> <body> <input name="s" id="s" title="搜索内容："/><input type="submit" value="搜索" onClick="findAll(s.value);return false;"/> <table width="100%" valign="top" DATASRC="#DataBinding1" id="DataT1" BORDER="1" CELLPADDING="3"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><span name="ID" id="ID" datafld="CODE_ID"> </span></td> <td><span name="name" id="name" datafld="CODE_NAME"> </span></td> <td><span name="desc" id="desc" datafld="CODE_DESC"> </span></td> </tr> </tbody> </table> </body> 复制代码代码如下: <?xml version="1.0" encoding="UTF-8"?> <INVENTORY> <ROW> <CODE_ID>PCOMM11</CODE_ID> <CODE_NAME>caracter handle</CODE_NAME> <CODE_DESC>hkdlhglfghfkgfk</CODE_DESC> </ROW> <ROW> <CODE_ID>PCOMM12</CODE_ID> <CODE_NAME>digital handle</CODE_NAME> <CODE_DESC>hkdlhglfghfkgfkgggg</CODE_DESC> </ROW> </INVENTORY>

　　推荐阅读

　　javascript获取元素文本内容的通用函数

一个获取元素文本内容的通用函数中华人民共和国1 2 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]将HTML DOM中几个容易常用的属性做下记录： nodeName、nodeValue 以及 nodeType 包含有关>>>详细阅读

本文标题：查询绑定数据岛的表格中的文本并修改显示方式的js代码

地址：http://www.17bianji.com/kaifa2/JS/27484.html

1/2 1