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


Posted in Javascript onDecember 15, 2009
<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(/<span\s+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(/<span\s+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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
JS的replace方法介绍
Oct 20 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 #Javascript
Javascript attachEvent传递参数的办法
Dec 14 #Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 #Javascript
javascript document.execCommand() 常用解析
Dec 14 #Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 #Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 #Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 #Javascript
You might like
php的计数器程序
2006/10/09 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
jQuery mobile 移动web(6)
2015/12/20 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
大学生新学期计划书
2014/04/28 职场文书
安全生产大检查方案
2014/05/07 职场文书
教导主任个人总结
2015/03/03 职场文书
追讨欠款律师函
2015/05/27 职场文书
计算机教师工作总结
2015/08/13 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书